Add 2 files

index.html

@@ -6,9 +6,32 @@
     <title>MySecureNotes | Personal Information Hub</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- PDF.js for document preview -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
+    <!-- SortableJS for drag and drop -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
     <style>
         .sidebar {
             transition: all 0.3s ease;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .sidebar-content {
+            flex: 1;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: #4a5568 #2d3748;
+        }
+        .sidebar-content::-webkit-scrollbar {
+            width: 8px;
+        }
+        .sidebar-content::-webkit-scrollbar-track {
+            background: #2d3748;
+        }
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background-color: #4a5568;
+            border-radius: 4px;
         }
         .note-content {
             min-height: 70vh;
@@ -36,6 +59,153 @@
             border-color: #4299e1;
             background-color: #ebf8ff;
         }
+        .document-preview {
+            height: 200px;
+            overflow: hidden;
+            position: relative;
+            background-color: #f5f5f5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .document-preview img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
+        .document-preview canvas {
+            max-width: 100%;
+            max-height: 100%;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .document-preview .file-icon {
+            font-size: 48px;
+            color: #6b7280;
+        }
+        .document-preview .preview-text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 5px;
+            font-size: 12px;
+            text-align: center;
+        }
+        .document-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+            gap: 20px;
+        }
+        .document-card {
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .document-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
+        }
+        .document-info {
+            padding: 12px;
+        }
+        .document-actions {
+            display: flex;
+            justify-content: space-between;
+            padding: 8px 12px;
+            border-top: 1px solid #eee;
+        }
+        .sortable-ghost {
+            opacity: 0.5;
+            background: #c8ebfb;
+        }
+        .notebook {
+            margin-left: 12px;
+            border-left: 2px solid #e2e8f0;
+            padding-left: 8px;
+        }
+        .notebook-header {
+            cursor: pointer;
+            user-select: none;
+        }
+        .notebook-header:hover {
+            background-color: #f7fafc;
+        }
+        .note-page {
+            margin-left: 24px;
+            padding-left: 8px;
+            border-left: 2px solid #e2e8f0;
+        }
+        .note-page:hover {
+            background-color: #f7fafc;
+        }
+        .drag-handle {
+            cursor: move;
+            margin-right: 8px;
+            color: #a0aec0;
+        }
+        .document-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 4px;
+            margin-top: 8px;
+        }
+        .document-tag {
+            background-color: #ebf8ff;
+            color: #3182ce;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+        .document-dropzone {
+            height: 10px;
+            background-color: #ebf8ff;
+            margin: 5px 0;
+            border-radius: 4px;
+            transition: all 0.2s;
+        }
+        .document-dropzone.active {
+            height: 30px;
+            background-color: #bee3f8;
+        }
+        .edit-notebook-input {
+            background: transparent;
+            border: none;
+            outline: none;
+            width: 100%;
+            font-weight: 600;
+        }
+        .document-in-notebook {
+            background-color: #f0f9ff;
+            border-left: 3px solid #3b82f6;
+        }
+        .active-notebook {
+            background-color: rgba(59, 130, 246, 0.1);
+        }
+        .note-page.drag-over {
+            background-color: #ebf8ff;
+            border-left: 3px solid #3b82f6;
+        }
+        /* New styles for scrollable sections */
+        .directory-section {
+            overflow-y: auto;
+            max-height: 40vh; /* Adjust this value as needed */
+            scrollbar-width: thin;
+            scrollbar-color: #4a5568 #2d3748;
+        }
+        .directory-section::-webkit-scrollbar {
+            width: 6px;
+        }
+        .directory-section::-webkit-scrollbar-track {
+            background: #2d3748;
+        }
+        .directory-section::-webkit-scrollbar-thumb {
+            background-color: #4a5568;
+            border-radius: 4px;
+        }
     </style>
 </head>
 <body class="bg-gray-100 font-sans">
@@ -100,32 +270,43 @@
                     </div>
                 </div>
                 
-                <button id="newNoteBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md mb-6 flex items-center justify-center space-x-2">
-                    <i class="fas fa-plus"></i>
-                    <span>New Note</span>
-                </button>
-                
-                <div class="mb-4">
-                    <div class="flex items-center justify-between text-gray-400 mb-2">
-                        <span class="text-sm font-medium">MY NOTES</span>
-                        <i class="fas fa-chevron-down text-xs"></i>
-                    </div>
-                    <ul id="notesList" class="space-y-1">
-                        <!-- Notes will be populated here -->
-                    </ul>
+                <div class="flex flex-col space-y-2 mb-6">
+                    <button id="newNotebookBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md flex items-center justify-center space-x-2">
+                        <i class="fas fa-plus"></i>
+                        <span>New Notebook</span>
+                    </button>
+                    <button id="newNoteBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md flex items-center justify-center space-x-2">
+                        <i class="fas fa-plus"></i>
+                        <span>New Note</span>
+                    </button>
                 </div>
                 
-                <div class="mb-4">
-                    <div class="flex items-center justify-between text-gray-400 mb-2">
-                        <span class="text-sm font-medium">DOCUMENTS</span>
-                        <i class="fas fa-chevron-down text-xs"></i>
+                <div class="sidebar-content">
+                    <div class="mb-4">
+                        <div class="flex items-center justify-between text-gray-400 mb-2">
+                            <span class="text-sm font-medium">MY NOTES</span>
+                        </div>
+                        <div class="directory-section">
+                            <ul id="notesList" class="space-y-1">
+                                <!-- Notes will be populated here -->
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <div class="mb-4">
+                        <div class="flex items-center justify-between text-gray-400 mb-2">
+                            <span class="text-sm font-medium">DOCUMENTS</span>
+                            <i class="fas fa-chevron-down text-xs"></i>
+                        </div>
+                        <div class="directory-section">
+                            <ul id="documentsList" class="space-y-1">
+                                <!-- Documents will be populated here -->
+                            </ul>
+                        </div>
                     </div>
-                    <ul id="documentsList" class="space-y-1">
-                        <!-- Documents will be populated here -->
-                    </ul>
                 </div>
                 
-                <div class="mt-8 pt-4 border-t border-gray-700">
+                <div class="pt-4 border-t border-gray-700">
                     <button id="logoutBtn" class="flex items-center space-x-2 text-gray-400 hover:text-white w-full">
                         <i class="fas fa-sign-out-alt"></i>
                         <span>Logout</span>
@@ -168,7 +349,7 @@
                                     <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
                                     <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
                                     <div class="border-t border-gray-200"></div>
-                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
                                 </div>
                             </div>
                         </div>
@@ -220,12 +401,45 @@
                 <div id="documentsView" class="hidden">
                     <div class="flex justify-between items-center mb-6">
                         <h2 class="text-xl font-semibold text-gray-800">My Documents</h2>
-                        <div class="file-upload">
-                            <button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 flex items-center space-x-2">
-                                <i class="fas fa-upload"></i>
-                                <span>Upload Document</span>
-                            </button>
-                            <input type="file" id="fileInput" class="hidden" multiple>
+                        <div class="flex space-x-2">
+                            <div class="relative">
+                                <select id="sortDocuments" class="appearance-none bg-white border border-gray-300 rounded-md px-3 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                    <option value="name-asc">Sort by: Name (A-Z)</option>
+                                    <option value="name-desc">Sort by: Name (Z-A)</option>
+                                    <option value="date-new">Sort by: Date (Newest)</option>
+                                    <option value="date-old">Sort by: Date (Oldest)</option>
+                                    <option value="size-large">Sort by: Size (Large)</option>
+                                    <option value="size-small">Sort by: Size (Small)</option>
+                                </select>
+                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                                    <i class="fas fa-chevron-down text-xs"></i>
+                                </div>
+                            </div>
+                            <div class="file-upload">
+                                <button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 flex items-center space-x-2">
+                                    <i class="fas fa-upload"></i>
+                                    <span>Upload Document</span>
+                                </button>
+                                <input type="file" id="fileInput" class="hidden" multiple>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mb-4 flex items-center space-x-2">
+                        <input type="text" id="documentSearch" placeholder="Search documents..." class="flex-1 px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <button id="addTagBtn" class="bg-gray-200 text-gray-700 py-2 px-3 rounded-md hover:bg-gray-300">
+                            <i class="fas fa-tag"></i>
+                        </button>
+                        <div id="tagDropdown" class="hidden absolute right-0 mt-10 w-48 bg-white rounded-md shadow-lg z-10 p-2">
+                            <div class="flex flex-wrap gap-2">
+                                <span class="document-tag cursor-pointer" data-tag="work">work</span>
+                                <span class="document-tag cursor-pointer" data-tag="personal">personal</span>
+                                <span class="document-tag cursor-pointer" data-tag="important">important</span>
+                                <span class="document-tag cursor-pointer" data-tag="finance">finance</span>
+                                <span class="document-tag cursor-pointer" data-tag="archive">archive</span>
+                            </div>
+                            <input type="text" id="newTagInput" placeholder="Add new tag" class="mt-2 w-full px-2 py-1 text-sm border border-gray-300 rounded">
+                            <button id="saveTagBtn" class="mt-2 w-full bg-blue-500 text-white py-1 px-2 rounded text-sm">Add</button>
                         </div>
                     </div>
                     
@@ -235,19 +449,11 @@
                         <p class="text-gray-500 mt-1">or click to browse files</p>
                     </div>
                     
-                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
-                        <div class="grid grid-cols-12 gap-4 border-b border-gray-200 px-4 py-3 font-medium text-gray-700">
-                            <div class="col-span-6">Name</div>
-                            <div class="col-span-2">Type</div>
-                            <div class="col-span-2">Size</div>
-                            <div class="col-span-2">Date</div>
-                        </div>
-                        <div id="documentsGrid" class="divide-y divide-gray-200">
-                            <!-- Documents will be listed here -->
-                            <div class="text-center py-8 text-gray-500">
-                                <i class="fas fa-folder-open text-3xl mb-2"></i>
-                                <p>No documents uploaded yet</p>
-                            </div>
+                    <div class="document-grid" id="documentsGrid">
+                        <!-- Documents will be listed here as cards -->
+                        <div class="text-center py-8 text-gray-500 col-span-full">
+                            <i class="fas fa-folder-open text-3xl mb-2"></i>
+                            <p>No documents uploaded yet</p>
                         </div>
                     </div>
                 </div>
@@ -256,17 +462,65 @@
     </div>
 
     <script>
+        // Set PDF.js worker path
+        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
+
         // Sample data for demonstration
-        const sampleNotes = [
-            { id: 1, title: 'Personal Goals', content: '1. Learn a new language\n2. Read 20 books this year\n3. Exercise 3 times a week', lastUpdated: '2023-06-15T10:30:00' },
-            { id: 2, title: 'Project Ideas', content: '1. Personal finance tracker\n2. Recipe organizer app\n3. Travel journal website', lastUpdated: '2023-06-10T14:45:00' },
-            { id: 3, title: 'Shopping List', content: '- Milk\n- Eggs\n- Bread\n- Fruits\n- Vegetables', lastUpdated: '2023-06-05T09:15:00' }
+        const sampleNotebooks = [
+            {
+                id: 1,
+                title: 'Work',
+                isOpen: true,
+                pages: [
+                    { id: 101, title: 'Project Ideas', content: '1. Personal finance tracker\n2. Recipe organizer app\n3. Travel journal website', lastUpdated: '2023-06-10T14:45:00' },
+                    { id: 102, title: 'Meeting Notes', content: 'Discussed new features\n- User authentication\n- Dashboard design\n- API endpoints', lastUpdated: '2023-06-12T09:30:00' }
+                ],
+                documents: []
+            },
+            {
+                id: 2,
+                title: 'Personal',
+                isOpen: false,
+                pages: [
+                    { id: 201, title: 'Shopping List', content: '- Milk\n- Eggs\n- Bread\n- Fruits\n- Vegetables', lastUpdated: '2023-06-05T09:15:00' },
+                    { id: 202, title: 'Books to Read', content: '1. Atomic Habits\n2. Deep Work\n3. The Psychology of Money', lastUpdated: '2023-05-28T16:20:00' }
+                ],
+                documents: []
+            }
         ];
 
+        // Sample documents with preview images (in a real app, these would be generated from actual files)
         const sampleDocuments = [
-            { id: 1, name: 'Resume.pdf', type: 'PDF', size: '2.4 MB', date: '2023-05-20' },
-            { id: 2, name: 'Contract.docx', type: 'Word', size: '1.1 MB', date: '2023-04-15' },
-            { id: 3, name: 'Budget.xlsx', type: 'Excel', size: '3.2 MB', date: '2023-03-10' }
+            { 
+                id: 1, 
+                name: 'Resume.pdf', 
+                type: 'PDF', 
+                size: '2.4 MB', 
+                date: '2023-05-20',
+                tags: ['work', 'important'],
+                previewUrl: 'https://example.com/previews/resume.jpg', // This would be generated in a real app
+                notebookId: null // Track which notebook this document belongs to
+            },
+            { 
+                id: 2, 
+                name: 'Contract.docx', 
+                type: 'Word', 
+                size: '1.1 MB', 
+                date: '2023-04-15',
+                tags: ['work', 'finance'],
+                previewUrl: null, // No preview for non-PDF files
+                notebookId: 1 // Belongs to Work notebook
+            },
+            { 
+                id: 3, 
+                name: 'Budget.xlsx', 
+                type: 'Excel', 
+                size: '3.2 MB', 
+                date: '2023-03-10',
+                tags: ['personal', 'finance'],
+                previewUrl: null, // No preview for non-PDF files
+                notebookId: 2 // Belongs to Personal notebook
+            }
         ];
 
         // DOM Elements
@@ -280,6 +534,7 @@
         const notesList = document.getElementById('notesList');
         const documentsList = document.getElementById('documentsList');
         const newNoteBtn = document.getElementById('newNoteBtn');
+        const newNotebookBtn = document.getElementById('newNotebookBtn');
         const emptyNewNoteBtn = document.getElementById('emptyNewNoteBtn');
         const emptyState = document.getElementById('emptyState');
         const noteEditor = document.getElementById('noteEditor');
@@ -299,13 +554,26 @@
         const searchBtn = document.getElementById('searchBtn');
         const searchBox = document.getElementById('searchBox');
         const lastSaved = document.getElementById('lastSaved');
+        const sortDocuments = document.getElementById('sortDocuments');
+        const documentSearch = document.getElementById('documentSearch');
+        const addTagBtn = document.getElementById('addTagBtn');
+        const tagDropdown = document.getElementById('tagDropdown');
+        const newTagInput = document.getElementById('newTagInput');
+        const saveTagBtn = document.getElementById('saveTagBtn');
 
         // Current state
         let currentNote = null;
+        let currentNotebook = null;
         let currentView = 'notes'; // 'notes' or 'documents'
-        let notes = [...sampleNotes];
+        let notebooks = [...sampleNotebooks];
         let documents = [...sampleDocuments];
         let autoSaveTimer = null;
+        let uploadedFiles = {}; // Store uploaded files for download
+        let currentSort = 'name-asc';
+        let currentTags = [];
+        let allTags = ['work', 'personal', 'important', 'finance', 'archive'];
+        let editingNotebookId = null;
+        let lastActiveNotebook = null; // Track the last active notebook
 
         // Initialize the app
         function initApp() {
@@ -313,11 +581,25 @@
             loginModal.classList.remove('hidden');
             
             // Populate notes and documents lists
-            renderNotesList();
+            renderNotebooksList();
             renderDocumentsList();
             
             // Set up event listeners
             setupEventListeners();
+            
+            // Initialize Sortable for document grid
+            new Sortable(documentsGrid, {
+                animation: 150,
+                ghostClass: 'sortable-ghost',
+                onEnd: function(evt) {
+                    // Update documents order in our state
+                    const items = Array.from(documentsGrid.children);
+                    const newOrder = items.map(item => parseInt(item.querySelector('.download-btn').getAttribute('data-id')));
+                    
+                    // Reorder documents array
+                    documents.sort((a, b) => newOrder.indexOf(a.id) - newOrder.indexOf(b.id));
+                }
+            });
         }
 
         // Set up all event listeners
@@ -361,6 +643,7 @@
             // New note buttons
             newNoteBtn.addEventListener('click', createNewNote);
             emptyNewNoteBtn.addEventListener('click', createNewNote);
+            newNotebookBtn.addEventListener('click', createNewNotebook);
             
             // Note editor events
             noteTitle.addEventListener('input', startAutoSave);
@@ -376,7 +659,7 @@
                 dropZone.addEventListener(eventName, preventDefaults, false);
             });
             
-            ['dragenter', 'dragover'].forEach(eventName => {
+            ['dragenter', 'dragoover'].forEach(eventName => {
                 dropZone.addEventListener(eventName, highlight, false);
             });
             
@@ -396,6 +679,50 @@
                 searchBox.classList.toggle('hidden');
             });
             
+            // Document sorting
+            sortDocuments.addEventListener('change', function() {
+                currentSort = this.value;
+                renderDocumentsGrid();
+            });
+            
+            // Document search
+            documentSearch.addEventListener('input', function() {
+                renderDocumentsGrid();
+            });
+            
+            // Tag management
+            addTagBtn.addEventListener('click', function(e) {
+                e.stopPropagation();
+                tagDropdown.classList.toggle('hidden');
+            });
+            
+            document.addEventListener('click', function(e) {
+                if (!addTagBtn.contains(e.target) && !tagDropdown.contains(e.target)) {
+                    tagDropdown.classList.add('hidden');
+                }
+            });
+            
+            // Tag selection
+            tagDropdown.addEventListener('click', function(e) {
+                if (e.target.classList.contains('document-tag') && e.target.getAttribute('data-tag')) {
+                    const tag = e.target.getAttribute('data-tag');
+                    if (!currentTags.includes(tag)) {
+                        currentTags.push(tag);
+                        renderDocumentsGrid();
+                    }
+                }
+            });
+            
+            // Add new tag
+            saveTagBtn.addEventListener('click', function() {
+                const newTag = newTagInput.value.trim().toLowerCase();
+                if (newTag && !allTags.includes(newTag)) {
+                    allTags.push(newTag);
+                    newTagInput.value = '';
+                    renderTagDropdown();
+                }
+            });
+            
             // Close menus when clicking elsewhere
             document.addEventListener('click', function(e) {
                 if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
@@ -439,219 +766,910 @@
                 // For demo, we'll just add them to our documents array
                 Array.from(files).forEach(file => {
                     const newDoc = {
-                        id: documents.length + 1,
+                        id: Date.now(), // Use timestamp as unique ID
                         name: file.name,
-                        type: file.type || 'Unknown',
+                        type: file.type || getFileType(file.name),
                         size: formatFileSize(file.size),
-                        date: new Date().toISOString().split('T')[0]
+                        date: new Date().toISOString().split('T')[0],
+                        tags: currentTags.length > 0 ? [...currentTags] : [],
+                        previewUrl: null,
+                        file: file, // Store the actual file for download
+                        notebookId: null // Initially not in any notebook
                     };
-                    documents.unshift(newDoc);
+                    
+            // Store the file for download
+            uploadedFiles[newDoc.id] = file;
+            
+            // Generate preview for PDF files
+            if (file.type === 'application/pdf') {
+                generatePdfPreview(file).then(previewUrl => {
+                    newDoc.previewUrl = previewUrl;
+                    renderDocumentsGrid();
                 });
+            }
+            
+            documents.unshift(newDoc);
+            currentTags = []; // Reset current tags after upload
+        });
+        
+        renderDocumentsList();
+        renderDocumentsGrid();
+        
+        // Show success message
+        alert(`${files.length} file(s) uploaded successfully!`);
+    }
+}
+
+// Get file type from extension
+function getFileType(filename) {
+    const extension = filename.split('.').pop().toLowerCase();
+    const types = {
+        'pdf': 'PDF',
+        'doc': 'Word',
+        'docx': 'Word',
+        'xls': 'Excel',
+        'xlsx': 'Excel',
+        'jpg': 'Image',
+        'jpeg': 'Image',
+        'png': 'Image',
+        'gif': 'Image'
+    };
+    return types[extension] || 'File';
+}
+
+// Generate PDF preview
+async function generatePdfPreview(file) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = async function(e) {
+            try {
+                const typedArray = new Uint8Array(e.target.result);
+                const pdf = await pdfjsLib.getDocument(typedArray).promise;
+                const page = await pdf.getPage(1);
                 
-                renderDocumentsList();
-                renderDocumentsGrid();
+                const viewport = page.getViewport({ scale: 0.5 });
+                const canvas = document.createElement('canvas');
+                const context = canvas.getContext('2d');
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+                
+                await page.render({
+                    canvasContext: context,
+                    viewport: viewport
+                }).promise;
                 
-                // Show success message
-                alert(`${files.length} file(s) uploaded successfully!`);
+                resolve(canvas.toDataURL('image/jpeg'));
+            } catch (error) {
+                console.error('Error generating PDF preview:', error);
+                resolve(null);
             }
-        }
+        };
+        reader.readAsArrayBuffer(file);
+    });
+}
+
+// Format file size
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// Create a new note
+function createNewNote() {
+    // Determine which notebook to add to
+    let targetNotebook = null;
+    
+    // If we have a current notebook, use that
+    if (currentNotebook) {
+        targetNotebook = notebooks.find(nb => nb.id === currentNotebook);
+    } 
+    // Otherwise use the last active notebook
+    else if (lastActiveNotebook) {
+        targetNotebook = notebooks.find(nb => nb.id === lastActiveNotebook);
+    }
+    // Otherwise create a new notebook
+    else if (notebooks.length > 0) {
+        targetNotebook = notebooks[0]; // Default to first notebook
+    } else {
+        // No notebooks exist, create one
+        const newNotebook = {
+            id: Date.now() + 1,
+            title: 'New Notebook',
+            isOpen: true,
+            pages: [],
+            documents: []
+        };
+        notebooks.unshift(newNotebook);
+        targetNotebook = newNotebook;
+    }
+    
+    const newNote = {
+        id: Date.now(), // Use timestamp as unique ID
+        title: 'Untitled Note',
+        content: '',
+        lastUpdated: new Date().toISOString()
+    };
+    
+    if (targetNotebook) {
+        targetNotebook.pages.unshift(newNote);
+        lastActiveNotebook = targetNotebook.id; // Update last active notebook
         
-        // Format file size
-        function formatFileSize(bytes) {
-            if (bytes === 0) return '0 Bytes';
-            const k = 1024;
-            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-            const i = Math.floor(Math.log(bytes) / Math.log(k));
-            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-        }
+        // Make sure notebook is open
+        targetNotebook.isOpen = true;
         
-        // Create a new note
-        function createNewNote() {
-            const newNote = {
-                id: notes.length + 1,
-                title: 'Untitled Note',
-                content: '',
-                lastUpdated: new Date().toISOString()
-            };
-            
-            notes.unshift(newNote);
-            renderNotesList();
-            openNote(newNote.id);
-            
-            // Focus on title field
-            setTimeout(() => {
-                noteTitle.focus();
-            }, 100);
-        }
+        renderNotebooksList();
+        openNote(newNote.id);
         
-        // Open a note by ID
-        function openNote(noteId) {
-            currentNote = notes.find(note => note.id === noteId);
-            if (currentNote) {
-                emptyState.classList.add('hidden');
-                noteEditor.classList.remove('hidden');
-                documentsView.classList.add('hidden');
-                currentView = 'notes';
-                
-                noteTitle.value = currentNote.title;
-                noteContent.innerHTML = currentNote.content.replace(/\n/g, '<br>');
-                lastSaved.textContent = formatDate(currentNote.lastUpdated);
-            }
+        // Focus on title field
+        setTimeout(() => {
+            noteTitle.focus();
+        }, 100);
+    }
+}
+
+// Create a new notebook
+function createNewNotebook() {
+    const newNotebook = {
+        id: Date.now(),
+        title: 'New Notebook',
+        isOpen: true,
+        pages: [],
+        documents: []
+    };
+    
+    notebooks.unshift(newNotebook);
+    renderNotebooksList();
+    
+    // Start editing the notebook name immediately
+    startEditingNotebookName(newNotebook.id);
+}
+
+// Start editing notebook name
+function startEditingNotebookName(notebookId) {
+    editingNotebookId = notebookId;
+    renderNotebooksList();
+    
+    // Focus on the input field
+    setTimeout(() => {
+        const input = document.querySelector(`.notebook-header[data-id="${notebookId}"] .edit-notebook-input`);
+        if (input) {
+            input.focus();
+            input.select();
         }
-        
-        // Start auto-save timer
-        function startAutoSave() {
-            if (autoSaveTimer) {
-                clearTimeout(autoSaveTimer);
+    }, 100);
+}
+
+// Save notebook name
+function saveNotebookName(notebookId, newName) {
+    const notebook = notebooks.find(nb => nb.id === notebookId);
+    if (notebook && newName.trim()) {
+        notebook.title = newName.trim();
+        editingNotebookId = null;
+        renderNotebooksList();
+    }
+}
+
+// Open a note by ID
+function openNote(noteId) {
+    // Find the note in any notebook
+    for (const notebook of notebooks) {
+        const note = notebook.pages.find(page => page.id === noteId);
+        if (note) {
+            currentNote = note;
+            currentNotebook = notebook.id;
+            lastActiveNotebook = notebook.id; // Update last active notebook
+            
+            // Open the notebook if it's closed
+            if (!notebook.isOpen) {
+                notebook.isOpen = true;
+                renderNotebooksList();
             }
             
-            autoSaveTimer = setTimeout(() => {
-                saveCurrentNote();
-            }, 2000);
+            emptyState.classList.add('hidden');
+            noteEditor.classList.remove('hidden');
+            documentsView.classList.add('hidden');
+            currentView = 'notes';
+            
+            noteTitle.value = currentNote.title;
+            noteContent.innerHTML = currentNote.content.replace(/\n/g, '<br>');
+            lastSaved.textContent = formatDate(currentNote.lastUpdated);
+            return;
         }
+    }
+}
+
+// Toggle notebook open/closed
+function toggleNotebook(notebookId) {
+    const notebook = notebooks.find(nb => nb.id === notebookId);
+    if (notebook && editingNotebookId !== notebookId) {
+        notebook.isOpen = !notebook.isOpen;
+        lastActiveNotebook = notebookId; // Update last active notebook
+        renderNotebooksList();
+    }
+}
+
+// Start auto-save timer
+function startAutoSave() {
+    if (autoSaveTimer) {
+        clearTimeout(autoSaveTimer);
+    }
+    
+    autoSaveTimer = setTimeout(() => {
+        saveCurrentNote();
+    }, 2000);
+}
+
+// Save current note
+function saveCurrentNote() {
+    if (currentNote) {
+        currentNote.title = noteTitle.value;
+        currentNote.content = noteContent.innerHTML.replace(/<br>/g, '\n');
+        currentNote.lastUpdated = new Date().toISOString();
+        
+        // Update last saved time
+        lastSaved.textContent = 'Just now';
         
-        // Save current note
-        function saveCurrentNote() {
-            if (currentNote) {
-                currentNote.title = noteTitle.value;
-                currentNote.content = noteContent.innerHTML.replace(/<br>/g, '\n');
-                currentNote.lastUpdated = new Date().toISOString();
+        // Update the note in the sidebar list
+        renderNotebooksList();
+    }
+}
+
+// Delete current note
+function deleteCurrentNote() {
+    if (currentNote && confirm('Are you sure you want to delete this note?')) {
+        // Find and remove the note from its notebook
+        for (const notebook of notebooks) {
+            const noteIndex = notebook.pages.findIndex(page => page.id === currentNote.id);
+            if (noteIndex !== -1) {
+                notebook.pages.splice(noteIndex, 1);
                 
-                // Update last saved time
-                lastSaved.textContent = 'Just now';
+                // If notebook is now empty, delete it too
+                if (notebook.pages.length === 0 && notebook.documents.length === 0) {
+                    const notebookIndex = notebooks.findIndex(nb => nb.id === notebook.id);
+                    if (notebookIndex !== -1) {
+                        notebooks.splice(notebookIndex, 1);
+                    }
+                }
                 
-                // Update the note in the sidebar list
-                renderNotesList();
-            }
-        }
-        
-        // Delete current note
-        function deleteCurrentNote() {
-            if (currentNote && confirm('Are you sure you want to delete this note?')) {
-                notes = notes.filter(note => note.id !== currentNote.id);
-                renderNotesList();
+                renderNotebooksList();
                 closeNoteEditor();
+                return;
             }
         }
+    }
+}
+
+// Close note editor
+function closeNoteEditor() {
+    emptyState.classList.remove('hidden');
+    noteEditor.classList.add('hidden');
+    currentNote = null;
+    currentNotebook = null;
+}
+
+// Render notebooks and notes in sidebar
+function renderNotebooksList() {
+    notesList.innerHTML = '';
+    
+    if (notebooks.length === 0) {
+        notesList.innerHTML = `
+            <li class="text-gray-400 text-sm px-3 py-2">
+                No notebooks yet. Create one to get started.
+            </li>
+        `;
+        return;
+    }
+    
+    notebooks.forEach(notebook => {
+        const notebookItem = document.createElement('li');
+        notebookItem.className = 'notebook';
         
-        // Close note editor
-        function closeNoteEditor() {
-            emptyState.classList.remove('hidden');
-            noteEditor.classList.add('hidden');
-            currentNote = null;
-        }
+        // Notebook header
+        const notebookHeader = document.createElement('div');
+        notebookHeader.className = `notebook-header flex items-center justify-between px-2 py-1 rounded-md ${notebook.id === lastActiveNotebook ? 'active-notebook' : ''}`;
+        notebookHeader.setAttribute('data-id', notebook.id);
         
-        // Render notes list in sidebar
-        function renderNotesList() {
-            notesList.innerHTML = '';
-            
-            notes.forEach(note => {
-                const noteItem = document.createElement('li');
-                noteItem.className = 'note-card bg-gray-700 hover:bg-gray-600 rounded-md px-3 py-2 cursor-pointer transition';
-                noteItem.innerHTML = `
-                    <div class="flex justify-between items-center">
-                        <div class="truncate">${note.title}</div>
-                        <i class="fas fa-chevron-right text-xs text-gray-400"></i>
-                    </div>
-                    <div class="text-xs text-gray-400 mt-1">${formatDate(note.lastUpdated)}</div>
-                `;
-                noteItem.addEventListener('click', () => openNote(note.id));
-                notesList.appendChild(noteItem);
+        if (editingNotebookId === notebook.id) {
+            notebookHeader.innerHTML = `
+                <div class="flex items-center w-full">
+                    <i class="fas fa-folder-open text-yellow-400 mr-2"></i>
+                    <input type="text" value="${notebook.title}" 
+                           class="edit-notebook-input" 
+                           onblur="saveNotebookName(${notebook.id}, this.value)"
+                           onkeydown="if(event.key === 'Enter') { this.blur(); }">
+                </div>
+            `;
+        } else {
+            notebookHeader.innerHTML = `
+                <div class="flex items-center">
+                    <i class="fas ${notebook.isOpen ? 'fa-folder-open' : 'fa-folder'} text-yellow-400 mr-2"></i>
+                    <span class="truncate">${notebook.title}</span>
+                </div>
+                <div class="flex items-center">
+                    <span class="text-xs text-gray-400 mr-2">${notebook.pages.length + notebook.documents.length}</span>
+                    <i class="fas fa-chevron-${notebook.isOpen ? 'down' : 'right'} text-xs text-gray-400"></i>
+                </div>
+            `;
+            
+            // Add double click to edit notebook name
+            notebookHeader.addEventListener('dblclick', (e) => {
+                if (!e.target.classList.contains('fa-ellipsis-v')) {
+                    startEditingNotebookName(notebook.id);
+                }
             });
         }
         
-        // Render documents list in sidebar
-        function renderDocumentsList() {
-            documentsList.innerHTML = '';
+        notebookHeader.addEventListener('click', () => toggleNotebook(notebook.id));
+        
+        notebookItem.appendChild(notebookHeader);
+        
+        // Notebook pages (notes) and documents
+        if (notebook.isOpen) {
+            const contentList = document.createElement('ul');
+            contentList.className = 'mt-1';
+            
+            // Make notebook content sortable
+            new Sortable(contentList, {
+                animation: 150,
+                ghostClass: 'sortable-ghost',
+                handle: '.drag-handle',
+                onEnd: function(evt) {
+                    // Update order in our state
+                    const items = Array.from(contentList.children);
+                    
+                    // Separate notes and documents
+                    const newNoteOrder = [];
+                    const newDocOrder = [];
+                    
+                    items.forEach(item => {
+                        const id = parseInt(item.getAttribute('data-id'));
+                        if (item.classList.contains('note-page')) {
+                            newNoteOrder.push(id);
+                        } else if (item.classList.contains('document-in-notebook')) {
+                            newDocOrder.push(id);
+                        }
+                    });
+                    
+                    // Reorder notebook pages array
+                    notebook.pages.sort((a, b) => newNoteOrder.indexOf(a.id) - newNoteOrder.indexOf(b.id));
+                    
+                    // Reorder notebook documents array
+                    notebook.documents.sort((a, b) => newDocOrder.indexOf(a.id) - newDocOrder.indexOf(b.id));
+                }
+            });
+            
+            // Add drop zones between items
+            function addDropZone(container, position) {
+                const dropZone = document.createElement('li');
+                dropZone.className = 'document-dropzone';
+                dropZone.setAttribute('data-dropzone', position);
+                
+                dropZone.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    dropZone.classList.add('active');
+                });
+                
+                dropZone.addEventListener('dragleave', () => {
+                    dropZone.classList.remove('active');
+                });
+                
+                dropZone.addEventListener('drop', (e) => {
+                    e.preventDefault();
+                    dropZone.classList.remove('active');
+                    
+                    const docId = e.dataTransfer.getData('text/plain');
+                    if (docId) {
+                        moveDocumentToNotebook(parseInt(docId), notebook.id, position);
+                    }
+                });
+                
+                container.appendChild(dropZone);
+            }
+            
+            // Initial drop zone at top
+            addDropZone(contentList, 'top');
+            
+            // Add notes
+            notebook.pages.forEach(page => {
+                const pageItem = document.createElement('li');
+                pageItem.className = 'note-page flex items-center px-2 py-1 rounded-md';
+                pageItem.setAttribute('data-id', page.id);
+                pageItem.innerHTML = `
+                    <i class="fas fa-grip-lines drag-handle mr-2"></i>
+                    <i class="fas fa-file-alt text-blue-400 mr-2"></i>
+                    <span class="truncate flex-1">${page.title}</span>
+                    <span class="text-xs text-gray-400">${formatDate(page.lastUpdated)}</span>
+                `;
+                
+                // Add drag and drop events for linking documents
+                pageItem.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    pageItem.classList.add('drag-over');
+                });
+                
+                pageItem.addEventListener('dragleave', () => {
+                    pageItem.classList.remove('drag-over');
+                });
+                
+                pageItem.addEventListener('drop', (e) => {
+                    e.preventDefault();
+                    pageItem.classList.remove('drag-over');
+                    
+                    const docId = e.dataTransfer.getData('text/plain');
+                    if (docId) {
+                        linkDocumentToNote(parseInt(docId), page.id);
+                    }
+                });
+                
+                pageItem.addEventListener('click', (e) => {
+                    // Don't open note if clicking on drag handle
+                    if (!e.target.classList.contains('drag-handle') && !e.target.classList.contains('fa-grip-lines')) {
+                        openNote(page.id);
+                    }
+                });
+                
+                // Make draggable
+                pageItem.draggable = true;
+                pageItem.addEventListener('dragstart', (e) => {
+                    e.dataTransfer.setData('text/plain', page.id);
+                    e.dataTransfer.effectAllowed = 'move';
+                });
+                
+                contentList.appendChild(pageItem);
+                
+                // Add drop zone after each note
+                addDropZone(contentList, page.id);
+            });
             
-            documents.slice(0, 3).forEach(doc => {
+            // Add documents
+            notebook.documents.forEach(doc => {
                 const docItem = document.createElement('li');
-                docItem.className = 'bg-gray-700 hover:bg-gray-600 rounded-md px-3 py-2 cursor-pointer';
+                docItem.className = 'document-in-notebook flex items-center px-2 py-1 rounded-md';
+                docItem.setAttribute('data-id', doc.id);
                 docItem.innerHTML = `
-                    <div class="flex items-center space-x-2">
-                        <i class="fas fa-file text-blue-400"></i>
-                        <span class="truncate">${doc.name}</span>
-                    </div>
+                    <i class="fas fa-grip-lines drag-handle mr-2"></i>
+                    <i class="fas ${getFileIcon(doc.type)} text-blue-400 mr-2"></i>
+                    <span class="truncate flex-1">${doc.name}</span>
+                    <button class="remove-doc-btn text-red-500 hover:text-red-700 text-xs">
+                        <i class="fas fa-times"></i>
+                    </button>
                 `;
-                docItem.addEventListener('click', () => showDocumentsView());
-                documentsList.appendChild(docItem);
+                
+                // Make draggable
+                docItem.draggable = true;
+                docItem.addEventListener('dragstart', (e) => {
+                    e.dataTransfer.setData('text/plain', doc.id);
+                    e.dataTransfer.effectAllowed = 'move';
+                });
+                
+                // Add click to open document
+                docItem.addEventListener('click', (e) => {
+                    if (!e.target.classList.contains('remove-doc-btn') && 
+                        !e.target.classList.contains('fa-times') &&
+                        !e.target.classList.contains('drag-handle') && 
+                        !e.target.classList.contains('fa-grip-lines')) {
+                        showDocumentsView();
+                    }
+                });
+                
+                // Add remove button
+                const removeBtn = docItem.querySelector('.remove-doc-btn');
+                removeBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    removeDocumentFromNotebook(doc.id, notebook.id);
+                });
+                
+                contentList.appendChild(docItem);
+                
+                // Add drop zone after each document
+                addDropZone(contentList, doc.id);
             });
             
-            if (documents.length > 3) {
-                const moreItem = document.createElement('li');
-                moreItem.className = 'text-gray-400 text-sm px-3 py-1';
-                moreItem.textContent = `+${documents.length - 3} more...`;
-                moreItem.addEventListener('click', () => showDocumentsView());
-                documentsList.appendChild(moreItem);
+            notebookItem.appendChild(contentList);
+        }
+        
+        notesList.appendChild(notebookItem);
+    });
+}
+
+// Link document to note (create a reference/link)
+function linkDocumentToNote(docId, noteId) {
+    const doc = documents.find(d => d.id === docId);
+    if (!doc) return;
+    
+    const note = findNoteById(noteId);
+    if (!note) return;
+    
+    // In a real app, you would create a proper link/reference
+    // For demo, we'll just add a link to the note content
+    const docLink = `[${doc.name}](${docId})`;
+    
+    // If note is currently open, update the editor
+    if (currentNote && currentNote.id === noteId) {
+        noteContent.innerHTML += `<p>${docLink}</p>`;
+        saveCurrentNote();
+    } else {
+        // Otherwise update the note content directly
+        note.content += `\n${docLink}`;
+        note.lastUpdated = new Date().toISOString();
+        renderNotebooksList();
+    }
+    
+    alert(`Document "${doc.name}" linked to note "${note.title}"`);
+}
+
+// Find note by ID
+function findNoteById(noteId) {
+    for (const notebook of notebooks) {
+        const note = notebook.pages.find(page => page.id === noteId);
+        if (note) return note;
+    }
+    return null;
+}
+
+// Move document to notebook at specific position
+function moveDocumentToNotebook(docId, notebookId, position) {
+    // Find the document
+    const doc = documents.find(d => d.id === docId);
+    if (!doc) return;
+    
+    // Remove from current notebook if it's in one
+    if (doc.notebookId) {
+        const currentNotebook = notebooks.find(nb => nb.id === doc.notebookId);
+        if (currentNotebook) {
+            const docIndex = currentNotebook.documents.findIndex(d => d.id === docId);
+            if (docIndex !== -1) {
+                currentNotebook.documents.splice(docIndex, 1);
             }
         }
+    }
+    
+    // Add to new notebook
+    const notebook = notebooks.find(nb => nb.id === notebookId);
+    if (notebook) {
+        // Update document's notebook reference
+        doc.notebookId = notebookId;
         
-        // Show documents view
-        function showDocumentsView() {
-            emptyState.classList.add('hidden');
-            noteEditor.classList.add('hidden');
-            documentsView.classList.remove('hidden');
-            currentView = 'documents';
-            renderDocumentsGrid();
+        // Find position to insert
+        if (position === 'top') {
+            notebook.documents.unshift(doc);
+        } else {
+            // Find the item (note or document) with this ID
+            const itemIndex = notebook.pages.findIndex(p => p.id === position);
+            if (itemIndex !== -1) {
+                // Insert after this note
+                notebook.documents.splice(itemIndex + 1, 0, doc);
+            } else {
+                // Maybe it's after a document
+                const docIndex = notebook.documents.findIndex(d => d.id === position);
+                if (docIndex !== -1) {
+                    notebook.documents.splice(docIndex + 1, 0, doc);
+                } else {
+                    // Default to adding at the end
+                    notebook.documents.push(doc);
+                }
+            }
         }
         
-        // Render documents grid
-        function renderDocumentsGrid() {
-            documentsGrid.innerHTML = '';
-            
-            if (documents.length === 0) {
-                documentsGrid.innerHTML = `
-                    <div class="text-center py-8 text-gray-500">
-                        <i class="fas fa-folder-open text-3xl mb-2"></i>
-                        <p>No documents uploaded yet</p>
-                    </div>
-                `;
-                return;
+        renderNotebooksList();
+        renderDocumentsGrid();
+    }
+}
+
+// Remove document from notebook
+function removeDocumentFromNotebook(docId, notebookId) {
+    const notebook = notebooks.find(nb => nb.id === notebookId);
+    if (notebook) {
+        const docIndex = notebook.documents.findIndex(d => d.id === docId);
+        if (docIndex !== -1) {
+            notebook.documents.splice(docIndex, 1);
+            
+            // Update document's notebook reference
+            const doc = documents.find(d => d.id === docId);
+            if (doc) {
+                doc.notebookId = null;
             }
             
-            documents.forEach(doc => {
-                const docRow = document.createElement('div');
-                docRow.className = 'grid grid-cols-12 gap-4 px-4 py-3 hover:bg-gray-50 items-center';
-                docRow.innerHTML = `
-                    <div class="col-span-6 flex items-center space-x-3">
-                        <i class="fas fa-file text-blue-500"></i>
-                        <span>${doc.name}</span>
-                    </div>
-                    <div class="col-span-2 text-sm text-gray-500">${doc.type}</div>
-                    <div class="col-span-2 text-sm text-gray-500">${doc.size}</div>
-                    <div class="col-span-2 text-sm text-gray-500">${doc.date}</div>
-                `;
-                documentsGrid.appendChild(docRow);
-            });
+            renderNotebooksList();
+            renderDocumentsGrid();
         }
+    }
+}
+
+// Render documents list in sidebar
+function renderDocumentsList() {
+    documentsList.innerHTML = '';
+    
+    documents.slice(0, 3).forEach(doc => {
+        const docItem = document.createElement('li');
+        docItem.className = 'bg-gray-700 hover:bg-gray-600 rounded-md px-3 py-2 cursor-pointer';
+        docItem.innerHTML = `
+            <div class="flex items-center space-x-2">
+                <i class="fas ${getFileIcon(doc.type)} text-blue-400"></i>
+                <span class="truncate">${doc.name}</span>
+            </div>
+        `;
+        docItem.addEventListener('click', () => showDocumentsView());
+        documentsList.appendChild(docItem);
+    });
+    
+    if (documents.length > 3) {
+        const moreItem = document.createElement('li');
+        moreItem.className = 'text-gray-400 text-sm px-3 py-1';
+        moreItem.textContent = `+${documents.length - 3} more...`;
+        moreItem.addEventListener('click', () => showDocumentsView());
+        documentsList.appendChild(moreItem);
+    }
+}
+
+// Get appropriate file icon
+function getFileIcon(fileType) {
+    const icons = {
+        'PDF': 'fa-file-pdf',
+        'Word': 'fa-file-word',
+        'Excel': 'fa-file-excel',
+        'Image': 'fa-file-image'
+    };
+    return icons[fileType] || 'fa-file';
+}
+
+// Show documents view
+function showDocumentsView() {
+    emptyState.classList.add('hidden');
+    noteEditor.classList.add('hidden');
+    documentsView.classList.remove('hidden');
+    currentView = 'documents';
+    renderDocumentsGrid();
+}
+
+// Sort documents based on current sort option
+function sortDocumentsList(docs) {
+    const searchTerm = documentSearch.value.toLowerCase();
+    
+    // Filter by search term if provided
+    let filteredDocs = docs;
+    if (searchTerm) {
+        filteredDocs = docs.filter(doc => 
+            doc.name.toLowerCase().includes(searchTerm) ||
+            (doc.tags && doc.tags.some(tag => tag.includes(searchTerm)))
+        );
+    }
+    
+    // Filter by tags if any are selected
+    if (currentTags.length > 0) {
+        filteredDocs = filteredDocs.filter(doc => 
+            doc.tags && currentTags.every(tag => doc.tags.includes(tag))
+        );
+    }
+    
+    // Apply sorting
+    return filteredDocs.sort((a, b) => {
+        switch (currentSort) {
+            case 'name-asc':
+                return a.name.localeCompare(b.name);
+            case 'name-desc':
+                return b.name.localeCompare(a.name);
+            case 'date-new':
+                return new Date(b.date) - new Date(a.date);
+            case 'date-old':
+                return new Date(a.date) - new Date(b.date);
+            case 'size-large':
+                return parseFloat(b.size) - parseFloat(a.size);
+            case 'size-small':
+                return parseFloat(a.size) - parseFloat(b.size);
+            default:
+                return 0;
+        }
+    });
+}
+
+// Render documents grid as cards with previews
+function renderDocumentsGrid() {
+    documentsGrid.innerHTML = '';
+    
+    const sortedDocuments = sortDocumentsList(documents);
+    
+    if (sortedDocuments.length === 0) {
+        documentsGrid.innerHTML = `
+            <div class="text-center py-8 text-gray-500 col-span-full">
+                <i class="fas fa-folder-open text-3xl mb-2"></i>
+                <p>No documents found</p>
+            </div>
+        `;
+        return;
+    }
+    
+    sortedDocuments.forEach(doc => {
+        const docCard = document.createElement('div');
+        docCard.className = `document-card ${doc.notebookId ? 'border-2 border-blue-400' : ''}`;
+        docCard.setAttribute('draggable', 'true');
+        docCard.setAttribute('data-id', doc.id);
         
-        // Format date for display
-        function formatDate(dateString) {
-            const date = new Date(dateString);
-            const now = new Date();
-            const diffInDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
-            
-            if (diffInDays === 0) {
-                return 'Today';
-            } else if (diffInDays === 1) {
-                return 'Yesterday';
-            } else if (diffInDays < 7) {
-                return `${diffInDays} days ago`;
-            } else {
-                return date.toLocaleDateString();
+        // Preview section
+        let previewContent = '';
+        if (doc.previewUrl) {
+            previewContent = `<img src="${doc.previewUrl}" alt="${doc.name} preview" class="w-full h-full object-cover">`;
+        } else {
+            const icon = getFileIcon(doc.type);
+            previewContent = `
+                <div class="flex flex-col items-center justify-center h-full">
+                    <i class="fas ${icon} text-4xl text-gray-500"></i>
+                    <p class="mt-2 text-sm text-gray-500">No preview available</p>
+                </div>
+            `;
+        }
+        
+        // Tags section
+        let tagsContent = '';
+        if (doc.tags && doc.tags.length > 0) {
+            tagsContent = `
+                <div class="document-tags">
+                    ${doc.tags.map(tag => `<span class="document-tag">${tag}</span>`).join('')}
+                </div>
+            `;
+        }
+        
+        // Notebook info if in a notebook
+        let notebookInfo = '';
+        if (doc.notebookId) {
+            const notebook = notebooks.find(nb => nb.id === doc.notebookId);
+            if (notebook) {
+                notebookInfo = `
+                    <div class="flex items-center text-xs text-blue-600 mt-1">
+                        <i class="fas fa-folder mr-1"></i>
+                        <span class="truncate">${notebook.title}</span>
+                    </div>
+                `;
             }
         }
         
-        // Reset app state
-        function resetAppState() {
-            currentNote = null;
-            emptyState.classList.remove('hidden');
-            noteEditor.classList.add('hidden');
-            documentsView.classList.add('hidden');
+        docCard.innerHTML = `
+            <div class="document-preview">
+                ${previewContent}
+                <div class="preview-text">${doc.name}</div>
+            </div>
+            <div class="document-info">
+                <h3 class="font-medium truncate">${doc.name}</h3>
+                <div class="flex justify-between text-sm text-gray-500 mt-1">
+                    <span>${doc.type}</span>
+                    <span>${doc.size}</span>
+                </div>
+                ${notebookInfo}
+                ${tagsContent}
+            </div>
+            <div class="document-actions">
+                <span class="text-xs text-gray-500">${doc.date}</span>
+                <div class="flex space-x-2">
+                    <button class="delete-doc-btn text-red-600 hover:text-red-800" data-id="${doc.id}">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                    <button class="download-btn text-blue-600 hover:text-blue-800" data-id="${doc.id}">
+                        <i class="fas fa-download"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        // Add drag events
+        docCard.addEventListener('dragstart', (e) => {
+            e.dataTransfer.setData('text/plain', doc.id);
+            e.dataTransfer.effectAllowed = 'move';
+        });
+        
+        documentsGrid.appendChild(docCard);
+    });
+    
+    // Add event listeners to download buttons
+    document.querySelectorAll('.download-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const docId = parseInt(btn.getAttribute('data-id'));
+            downloadDocument(docId);
+        });
+    });
+    
+    // Add event listeners to delete buttons
+    document.querySelectorAll('.delete-doc-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const docId = parseInt(btn.getAttribute('data-id'));
+            deleteDocument(docId);
+        });
+    });
+}
+
+// Render tag dropdown
+function renderTagDropdown() {
+    const tagContainer = tagDropdown.querySelector('.flex-wrap');
+    tagContainer.innerHTML = '';
+    
+    allTags.forEach(tag => {
+        const tagElement = document.createElement('span');
+        tagElement.className = 'document-tag cursor-pointer';
+        tagElement.setAttribute('data-tag', tag);
+        tagElement.textContent = tag;
+        tagContainer.appendChild(tagElement);
+    });
+}
+
+// Download document
+function downloadDocument(docId) {
+    const doc = documents.find(d => d.id === docId);
+    if (!doc) return;
+    
+    // Check if we have the actual file (for uploaded files)
+    if (uploadedFiles[docId]) {
+        const file = uploadedFiles[docId];
+        const url = URL.createObjectURL(file);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = file.name;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    } else {
+        // For demo files, we can't actually download them
+        alert(`Downloading ${doc.name}`);
+    }
+}
+
+// Delete document
+function deleteDocument(docId) {
+    if (confirm('Are you sure you want to delete this document?')) {
+        // Remove from documents array
+        documents = documents.filter(doc => doc.id !== docId);
+        
+        // Remove from any notebook it might be in
+        notebooks.forEach(notebook => {
+            notebook.documents = notebook.documents.filter(doc => doc.id !== docId);
+        });
+        
+        // Remove from uploaded files if it exists there
+        if (uploadedFiles[docId]) {
+            delete uploadedFiles[docId];
         }
         
-        // Initialize the app when the page loads
-        window.addEventListener('DOMContentLoaded', initApp);
+        renderDocumentsList();
+        renderDocumentsGrid();
+        renderNotebooksList();
+    }
+}
+
+// Format date for display
+function formatDate(dateString) {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+    
+    if (diffInDays === 0) {
+        return 'Today';
+    } else if (diffInDays === 1) {
+        return 'Yesterday';
+    } else if (diffInDays < 7) {
+        return `${diffInDays} days ago`;
+    } else {
+        return date.toLocaleDateString();
+    }
+}
+
+// Reset app state
+function resetAppState() {
+    currentNote = null;
+    currentNotebook = null;
+    emptyState.classList.remove('hidden');
+    noteEditor.classList.add('hidden');
+    documentsView.classList.add('hidden');
+}
+
+// Initialize the app when the page loads
+window.addEventListener('DOMContentLoaded', initApp);
+
+// Global functions for inline event handlers
+window.saveNotebookName = saveNotebookName;
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lwmecham/useful-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt

@@ -0,0 +1,6 @@
+Make a preview of the uploaded documents first page. And add a download button to retrive the documents later. 
+Create a way to sort and organize documents that are uploaded. Also create a way to delete uploaded documets. In the "MY NOTES" section create a hiarical structure so note pages are held in note books in the hierach and that note pages order can be changed by the user.
+Add a way for the user to edit the notebook names. Add a way to drag and drop the uploaded documents into the Notebook between the note pages as selected by the user. 
+Make a button like called "+ New Notebook" similar to "+ New Note" to add the notebooks instead of using the "+" button. When the "+ New Note" button is clicked it should add a notebook page to the active (most recently selected) notebook. I want to be able to move the uploaded documents from the documents list up into the notebook for easy referance and selection within the notebook. I want to be able to select where the document appears in a selected notebook. Add a slider bar to the left directory so I can scroll when the directory gets long.   
+Make the "+ New Notebook" button apear the same color and above the "+ New Note" button. Add a sroll bar on the left side ribbon to scroll up and down onthe "MY NOTES" and "DOCUMENTS" directory. Allow the user to drag the uploaded file over a note page and drop it. The action should be a link that opens the uploaded file.  
+Please add a scroll bar to the "MY NOTES" and "DOCUMENTS" left side directory.