+
diff --git a/js/editor-actions.js b/js/editor-actions.js
index 1dff525..a80128a 100644
--- a/js/editor-actions.js
+++ b/js/editor-actions.js
@@ -93,6 +93,11 @@ window.EditorActions = {
document.getElementById('btn-import-export')?.addEventListener('click', () => {
const modal = document.getElementById('transfer-modal');
modal.classList.add('show');
+
+ // Default to Import
+ const importTab = document.querySelector('#transfer-toggle [data-target="import"]');
+ if (importTab) importTab.click();
+
const note = window.EditorState.getActiveNote();
const exportInput = document.getElementById('export-filename-input');
if (note && exportInput) {
@@ -416,6 +421,7 @@ window.EditorActions = {
try {
await window.EditorState.saveLocalState();
if (window.EditorState.appMode === 'github') {
+ window.EditorState.pendingSync = true;
// In GitHub mode, we manually trigger the sync immediately
await window.EditorState.performCloudSync();
}
diff --git a/js/editor-core.js b/js/editor-core.js
index b933dbb..03bcc94 100644
--- a/js/editor-core.js
+++ b/js/editor-core.js
@@ -231,14 +231,25 @@ window.EditorCore = {
folderSection.className = 'dashboard-folder-section';
const folderTitle = document.createElement('div');
- folderTitle.className = 'dashboard-folder-title';
- folderTitle.innerHTML = `
${folder}`;
+ folderTitle.className = 'dashboard-folder-title collapsible';
+ folderTitle.innerHTML = `
+
+
+ ${folder}
+ `;
const notesList = document.createElement('div');
- notesList.className = 'dashboard-notes-list';
+ notesList.className = 'dashboard-notes-list collapsed'; // Default collapsed
const folderNotes = folder === 'All Notes' ? window.EditorState.notes : window.EditorState.notes.filter(n => n.folder === folder);
+ // Click listener to toggle collapse
+ folderTitle.addEventListener('click', () => {
+ const isCollapsed = notesList.classList.toggle('collapsed');
+ const chevron = folderTitle.querySelector('.collapse-icon');
+ if (chevron) chevron.style.transform = isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)';
+ });
+
folderNotes.forEach(note => {
const noteRow = document.createElement('div');
noteRow.className = 'dashboard-note-row';
@@ -290,6 +301,10 @@ window.EditorCore = {
folderSection.appendChild(folderTitle);
folderSection.appendChild(notesList);
container.appendChild(folderSection);
+
+ // Initial state for chevron
+ const initialChevron = folderTitle.querySelector('.collapse-icon');
+ if (initialChevron) initialChevron.style.transform = 'rotate(-90deg)';
});
if (window.lucide) lucide.createIcons();
diff --git a/js/ui.js b/js/ui.js
index e391dbc..bac6e29 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -217,8 +217,10 @@ document.addEventListener('DOMContentLoaded', () => {
document.getElementById('mobile-sidebar-overlay')?.classList.remove('show');
document.getElementById('settings-modal')?.classList.add('show');
});
- document.getElementById('settings-modal-close')?.addEventListener('click', window.closeSettingsModal);
- document.getElementById('settings-modal-close-btn')?.addEventListener('click', window.closeSettingsModal);
+ document.getElementById('settings-modal-close')?.addEventListener('click', () => {
+ initSettingsToggles();
+ window.closeSettingsModal();
+ });
document.getElementById('btn-pat-help')?.addEventListener('click', (e) => {
e.preventDefault();
@@ -588,40 +590,57 @@ document.addEventListener('DOMContentLoaded', () => {
document.getElementById('delete-cancel')?.addEventListener('click', window.closeDeleteModal);
// ✨ SETTINGS LOGIC ✨
- const autoSaveCheckbox = document.getElementById('setting-auto-save');
- if (autoSaveCheckbox) {
- window.EditorState.loadAutoSave();
- autoSaveCheckbox.checked = window.EditorState.autoSave;
+ const settingsNavItems = document.querySelectorAll('.settings-nav-item');
+ const settingsContents = document.querySelectorAll('.settings-content');
- autoSaveCheckbox.addEventListener('change', (e) => {
- window.EditorState.autoSave = e.target.checked;
- window.EditorState.saveAutoSave();
+ settingsNavItems.forEach(item => {
+ item.addEventListener('click', () => {
+ const section = item.getAttribute('data-section');
+ settingsNavItems.forEach(nav => nav.classList.remove('active'));
+ settingsContents.forEach(content => content.classList.remove('active'));
- if (window.EditorState.autoSave) {
- window.showToast("
Auto Save Enabled");
- } else {
- window.showToast("
Manual Save Mode");
- }
+ item.classList.add('active');
+ document.getElementById(`settings-section-${section}`).classList.add('active');
});
- }
+ });
+
+ const initSettingsToggles = () => {
+ window.EditorState.loadAutoSave();
+ window.EditorState.loadUIVisibility();
- // UI Component Visibility Toggles
- const uiToggles = document.querySelectorAll('.settings-modal-box input[data-component]');
- uiToggles.forEach(toggle => {
- toggle.addEventListener('change', (e) => {
- window.EditorState.uiVisibility[e.target.id] = e.target.checked;
- window.EditorState.saveUIVisibility();
+ const autoSaveCheckbox = document.getElementById('setting-auto-save');
+ if (autoSaveCheckbox) autoSaveCheckbox.checked = window.EditorState.autoSave;
+
+ const uiToggles = document.querySelectorAll('.settings-modal-box input[data-component]');
+ uiToggles.forEach(toggle => {
+ const isVisible = window.EditorState.uiVisibility[toggle.id] !== false;
+ toggle.checked = isVisible;
});
- });
- window.EditorState.loadUIVisibility();
- // Initialize toggles from state
- uiToggles.forEach(toggle => {
- if (window.EditorState.uiVisibility[toggle.id] === undefined) {
- window.EditorState.uiVisibility[toggle.id] = true; // Default
+ window.EditorState.applyUIVisibility();
+ };
+
+ const saveSettingsChanges = () => {
+ const autoSaveCheckbox = document.getElementById('setting-auto-save');
+ if (autoSaveCheckbox) {
+ window.EditorState.autoSave = autoSaveCheckbox.checked;
+ window.EditorState.saveAutoSave();
}
- });
- window.EditorState.applyUIVisibility();
+
+ const uiToggles = document.querySelectorAll('.settings-modal-box input[data-component]');
+ uiToggles.forEach(toggle => {
+ window.EditorState.uiVisibility[toggle.id] = toggle.checked;
+ });
+ window.EditorState.saveUIVisibility();
+
+ window.showToast("
Settings Saved");
+ window.closeSettingsModal();
+ };
+
+ document.getElementById('settings-modal-save-btn')?.addEventListener('click', saveSettingsChanges);
+
+ // Initial load
+ setTimeout(initSettingsToggles, 100);
// Toggle Manual Save Button Visibility
const updateSaveButtonVisibility = (enabled) => {
diff --git a/server.log b/server.log
index f2054f7..986cffb 100644
--- a/server.log
+++ b/server.log
@@ -1,32 +1,8 @@
-127.0.0.1 - - [08/Mar/2026 07:03:49] "GET / HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:03:49] "GET /style.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:03:49] "GET /mobile.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:03:50] "GET /js/ui.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:03:50] "GET /js/github.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:03:50] "GET /js/editor-state.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:03:50] "GET /js/editor-actions.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:03:50] "GET /js/editor-core.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:06:01] "GET / HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:06:01] "GET /style.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:06:01] "GET /mobile.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:06:01] "GET /js/ui.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:06:01] "GET /js/github.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:06:01] "GET /js/editor-state.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:06:01] "GET /js/editor-actions.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:06:01] "GET /js/editor-core.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:08:14] "GET / HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:08:14] "GET /style.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:08:14] "GET /mobile.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:08:14] "GET /js/ui.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:08:14] "GET /js/github.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:08:14] "GET /js/editor-state.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:08:14] "GET /js/editor-actions.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:08:14] "GET /js/editor-core.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:10:20] "GET / HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:10:20] "GET /style.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:10:20] "GET /mobile.css HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:10:20] "GET /js/ui.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:10:20] "GET /js/github.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:10:20] "GET /js/editor-state.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:10:20] "GET /js/editor-actions.js HTTP/1.1" 200 -
-127.0.0.1 - - [08/Mar/2026 07:10:20] "GET /js/editor-core.js HTTP/1.1" 200 -
+127.0.0.1 - - [08/Mar/2026 08:16:44] "GET / HTTP/1.1" 200 -
+127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /style.css HTTP/1.1" 200 -
+127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /mobile.css HTTP/1.1" 200 -
+127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/ui.js HTTP/1.1" 200 -
+127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/github.js HTTP/1.1" 200 -
+127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/editor-state.js HTTP/1.1" 200 -
+127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/editor-actions.js HTTP/1.1" 200 -
+127.0.0.1 - - [08/Mar/2026 08:16:44] "GET /js/editor-core.js HTTP/1.1" 200 -
diff --git a/style.css b/style.css
index 0affd7a..751be26 100644
--- a/style.css
+++ b/style.css
@@ -1251,11 +1251,28 @@ body.dark-mode .btn-cancel:hover {
/* ✨ TRANSFER MODAL REDESIGN ✨ */
.transfer-modal-box {
- max-width: 500px !important;
+ width: 500px !important;
+ max-width: 95vw !important;
+ height: 520px !important;
+ display: flex;
+ flex-direction: column;
+ padding: 0 !important;
+ overflow: hidden;
+}
+
+.transfer-modal-box .premium-modal-header {
+ padding: 32px 32px 20px 32px;
+ margin-bottom: 0;
+ flex-shrink: 0;
}
.transfer-section {
width: 100%;
+ padding: 0 32px 32px 32px;
+ flex: 1;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
}
.transfer-grid {
@@ -1263,6 +1280,7 @@ body.dark-mode .btn-cancel:hover {
grid-template-columns: 1fr 1fr;
gap: 16px;
text-align: left;
+ min-height: 220px; /* Reserves space to prevent jumping when PDF options show */
}
.transfer-label {
@@ -1279,6 +1297,8 @@ body.dark-mode .btn-cancel:hover {
background-color: var(--toggle-track);
border-radius: 12px;
padding: 4px;
+ margin: 0 32px 24px 32px;
+ flex-shrink: 0;
}
.transfer-mode-pill .mode-tab.active {
@@ -1413,17 +1433,38 @@ body.dark-mode .btn-cancel:hover {
font-size: 1rem;
font-weight: 700;
color: var(--accent-color);
- padding: 8px 12px;
+ padding: 12px 16px;
background-color: var(--hover-bg);
- border-radius: 10px;
+ border-radius: 12px;
margin-bottom: 8px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.dashboard-folder-title:hover {
+ background-color: var(--border-color);
+}
+
+.dashboard-folder-title .collapse-icon {
+ width: 18px;
+ height: 18px;
+ transition: transform 0.2s ease;
}
.dashboard-notes-list {
display: flex;
flex-direction: column;
gap: 4px;
- padding-left: 20px;
+ padding-left: 32px;
+ overflow: hidden;
+ transition: max-height 0.3s ease;
+ max-height: 2000px;
+ margin-bottom: 16px;
+}
+
+.dashboard-notes-list.collapsed {
+ max-height: 0;
+ margin-bottom: 0;
}
.dashboard-note-row {
@@ -1666,59 +1707,137 @@ body.dark-mode .btn-cancel:hover {
.settings-modal-box {
text-align: left !important;
+ width: 700px !important;
+ max-width: 95vw !important;
+ height: 500px !important;
+ padding: 0 !important;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ border-radius: 24px !important;
+}
+
+.settings-container {
+ display: flex;
+ flex: 1;
+ min-height: 0;
+}
+
+/* Left Navigation Panel */
+.settings-nav {
+ width: 220px;
+ background-color: var(--nav-bg);
+ border-right: 1px solid var(--border-color);
+ padding: 24px 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ flex-shrink: 0;
}
-.settings-modal-box .premium-modal-header {
- align-items: flex-start !important;
+.settings-nav-item {
+ padding: 12px 16px;
+ border-radius: 12px;
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 0.9rem;
+ color: var(--text-color);
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.settings-nav-item:hover {
+ background-color: var(--hover-bg);
}
-.settings-section {
+.settings-nav-item.active {
+ background-color: var(--accent-color);
+ color: white;
+}
+
+.settings-nav-item i {
+ width: 18px;
+ height: 18px;
+}
+
+/* Right Content Panel */
+.settings-content {
+ flex: 1;
+ padding: 32px;
+ overflow-y: auto;
+ background-color: var(--bg-color);
+ display: none;
+}
+
+.settings-content.active {
+ display: block;
+}
+
+.settings-content-header {
margin-bottom: 24px;
}
-.settings-section-title {
- font-size: 0.75rem;
+.settings-content-header h3 {
+ font-size: 1.25rem;
font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 1px;
- opacity: 0.5;
- margin-bottom: 12px;
- padding-bottom: 8px;
- border-bottom: 1px solid var(--border-color);
+ margin-bottom: 4px;
+ color: var(--accent-color);
+}
+
+.settings-content-header p {
+ font-size: 0.85rem;
+ opacity: 0.6;
+}
+
+.settings-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 20px;
}
-.setting-item {
+.setting-card {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 12px 0;
+ padding: 16px;
+ background-color: var(--nav-bg);
+ border-radius: 16px;
+ border: 1px solid var(--border-color);
+ transition: all 0.2s ease;
}
-.setting-label {
- font-weight: 600;
- display: block;
+.setting-card:hover {
+ border-color: var(--accent-color);
}
-.setting-info small {
- opacity: 0.6;
- font-size: 0.8rem;
- display: block;
- margin-top: 2px;
+.setting-details {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
}
-.setting-sub-list {
- padding-left: 20px;
- border-left: 2px solid var(--border-color);
- margin: 4px 0 16px 8px;
+.setting-card-title {
+ font-weight: 700;
+ font-size: 0.95rem;
+ color: var(--text-color);
}
-.setting-sub-list .setting-item {
- padding: 8px 0;
+.setting-card-desc {
+ font-size: 0.8rem;
+ opacity: 0.6;
+ line-height: 1.4;
}
-.setting-sub-list .setting-label {
- font-size: 0.9rem;
- font-weight: 500;
+.settings-footer {
+ padding: 20px 32px;
+ background-color: var(--nav-bg);
+ border-top: 1px solid var(--border-color);
+ display: flex;
+ justify-content: flex-end;
+ gap: 16px;
+ flex-shrink: 0;
}
.premium-modal-header {
@@ -1991,6 +2110,18 @@ body.dark-mode .btn-help-cute:hover {
opacity: 0.3;
}
+/* ✨ RIGHT OPENING DROPDOWN FOR TRANSFER MODAL ✨ */
+#transfer-size-dropdown .dropdown-list {
+ left: calc(100% + 10px) !important;
+ top: 0 !important;
+ width: 200px !important;
+ transform: translateX(-10px) scale(0.98);
+}
+
+#transfer-size-dropdown.open .dropdown-list {
+ transform: translateX(0) scale(1);
+}
+
/* ✨ CIRCULAR CHECKBOX FOR BULK SYNC ✨ */
.sync-item {
display: flex;