-
-
+
+
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/js/editor-core.js b/js/editor-core.js
index f82efe3..695c1e2 100644
--- a/js/editor-core.js
+++ b/js/editor-core.js
@@ -211,124 +211,88 @@ window.EditorCore = {
},
renderFoldersList() {
- const container = document.getElementById('folders-list-container');
+ this.renderNotesDashboard();
+ this.renderMainSidebarFolders();
+ },
+
+ renderNotesList() {
+ this.renderNotesDashboard();
+ },
+
+ renderNotesDashboard() {
+ const container = document.getElementById('notes-dashboard-content');
if (!container) return;
container.innerHTML = '';
window.EditorState.extractFoldersFromNotes();
window.EditorState.folders.forEach(folder => {
- const div = document.createElement('div');
- div.className = `folder-item ${folder === window.EditorState.activeFolder ? 'active' : ''}`;
-
- const iconEl = document.createElement('i');
- iconEl.setAttribute('data-lucide', folder === 'All Notes' ? 'library' : 'folder');
+ const folderSection = document.createElement('div');
+ folderSection.className = 'dashboard-folder-section';
- const textSpan = document.createElement('span');
- textSpan.textContent = folder;
- textSpan.style.flex = "1";
- textSpan.style.whiteSpace = 'nowrap';
- textSpan.style.overflow = 'hidden';
- textSpan.style.textOverflow = 'ellipsis';
+ const folderTitle = document.createElement('div');
+ folderTitle.className = 'dashboard-folder-title';
+ folderTitle.innerHTML = `
${folder}`;
- let count = folder === 'All Notes' ? window.EditorState.notes.length : window.EditorState.notes.filter(n => n.folder === folder).length;
- const countSpan = document.createElement('span');
- countSpan.textContent = count;
- countSpan.style.fontSize = "0.75rem";
- countSpan.style.opacity = "0.6";
-
- div.appendChild(iconEl);
- div.appendChild(textSpan);
- div.appendChild(countSpan);
-
- if (folder !== 'All Notes') {
- const delBtn = document.createElement('button');
- delBtn.className = 'folder-del-btn';
- delBtn.innerHTML = '
';
- delBtn.title = "Delete Folder";
-
- delBtn.addEventListener('click', (e) => {
- e.stopPropagation();
- const folderNotes = window.EditorState.notes.filter(n => n.folder === folder);
- if (folderNotes.length > 0) {
- window.showToast("
Move notes first.");
- return;
- }
- window.EditorActions.pendingDeleteData = { type: 'folder', id: folder };
- document.getElementById('delete-modal-title').textContent = 'Delete Folder?';
- document.getElementById('delete-modal-desc').textContent = 'This empty folder will be removed. Are you sure?';
- document.getElementById('delete-modal').classList.add('show');
- });
- div.appendChild(delBtn);
- }
+ const notesList = document.createElement('div');
+ notesList.className = 'dashboard-notes-list';
- div.addEventListener('click', () => {
- window.EditorState.activeFolder = folder;
- this.renderFoldersList();
- this.renderNotesList();
-
- if (window.innerWidth <= 768) {
- document.querySelector('.notes-dashboard-box')?.classList.add('show-notes-pane');
- }
- });
-
- container.appendChild(div);
- });
-
- this.renderMainSidebarFolders();
- if (window.lucide) lucide.createIcons();
- },
-
- renderNotesList() {
- const container = document.getElementById('notes-list-container');
- const folderTitle = document.getElementById('current-folder-name');
- if (!container) return;
-
- container.innerHTML = '';
- if (folderTitle) folderTitle.textContent = window.EditorState.activeFolder;
+ const folderNotes = folder === 'All Notes' ? window.EditorState.notes : window.EditorState.notes.filter(n => n.folder === folder);
- this.updatePillUI();
+ folderNotes.forEach(note => {
+ const noteRow = document.createElement('div');
+ noteRow.className = 'dashboard-note-row';
- let displayNotes = window.EditorState.activeFolder === 'All Notes' ? window.EditorState.notes : window.EditorState.notes.filter(n => n.folder === window.EditorState.activeFolder);
+ const noteInfo = document.createElement('div');
+ noteInfo.className = 'dashboard-note-info';
+ noteInfo.innerHTML = `
${note.title}`;
- if (displayNotes.length > 0 && !displayNotes.find(n => n.id === this.highlightedNoteId)) {
- this.highlightedNoteId = displayNotes[0].id;
- } else if (displayNotes.length === 0) {
- this.highlightedNoteId = null;
- }
+ const actions = document.createElement('div');
+ actions.className = 'dashboard-note-actions';
- displayNotes.forEach(note => {
- const div = document.createElement('div');
- div.className = `note-item ${note.id === this.highlightedNoteId ? 'active' : ''}`;
+ const openBtn = document.createElement('button');
+ openBtn.className = 'dashboard-action-btn';
+ openBtn.innerHTML = '
';
+ openBtn.setAttribute('data-tooltip', 'Open Note');
+ openBtn.addEventListener('click', async (e) => {
+ e.stopPropagation();
+ window.EditorState.activeNoteId = note.id;
+ const editor = document.getElementById('markdown-input');
+ editor.value = note.content;
+ await window.EditorState.saveLocalState();
+ this.renderMarkdownCore(note.content);
+ window.closeNotesModal();
+ });
- const titleContainer = document.createElement('div');
- titleContainer.className = 'note-title';
+ const deleteBtn = document.createElement('button');
+ deleteBtn.className = 'dashboard-action-btn btn-delete';
+ deleteBtn.innerHTML = '
';
+ deleteBtn.setAttribute('data-tooltip', 'Delete Note');
+ deleteBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ window.EditorActions.pendingDeleteData = { type: 'note', id: note.id };
+ document.getElementById('delete-modal-title').textContent = 'Delete Note?';
+ document.getElementById('delete-modal-desc').textContent = 'This action cannot be undone. Are you sure?';
+ document.getElementById('delete-modal').classList.add('show');
+ });
- const iconEl = document.createElement('i');
- iconEl.setAttribute('data-lucide', 'file-text');
+ actions.appendChild(openBtn);
+ actions.appendChild(deleteBtn);
- const textSpan = document.createElement('span');
- textSpan.textContent = note.title;
+ noteRow.appendChild(noteInfo);
+ noteRow.appendChild(actions);
- titleContainer.appendChild(iconEl);
- titleContainer.appendChild(textSpan);
- div.appendChild(titleContainer);
+ noteRow.addEventListener('click', () => openBtn.click());
- div.addEventListener('click', () => {
- this.highlightedNoteId = note.id;
- this.renderNotesList();
- this.renderDashboardPreview();
- if (window.innerWidth <= 768) {
- document.querySelector('.notes-dashboard-box')?.classList.add('show-preview-pane');
- }
+ notesList.appendChild(noteRow);
});
- div.addEventListener('dblclick', () => { document.getElementById('dash-btn-edit')?.click(); });
- container.appendChild(div);
+ folderSection.appendChild(folderTitle);
+ folderSection.appendChild(notesList);
+ container.appendChild(folderSection);
});
if (window.lucide) lucide.createIcons();
- this.renderDashboardPreview();
},
renderManagementModal() {
diff --git a/js/ui.js b/js/ui.js
index fe96911..fb5fe30 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -37,6 +37,44 @@ document.addEventListener('DOMContentLoaded', () => {
if (window.lucide) lucide.createIcons();
+ // ✨ CUSTOM TOOLTIP SYSTEM ✨
+ const tooltip = document.createElement('div');
+ tooltip.className = 'custom-tooltip';
+ document.body.appendChild(tooltip);
+
+ let tooltipTimeout;
+
+ const showTooltip = (el, text) => {
+ const rect = el.getBoundingClientRect();
+ tooltip.textContent = text;
+ tooltip.classList.add('show');
+
+ // Centered position above the element
+ const tooltipRect = tooltip.getBoundingClientRect();
+ tooltip.style.top = `${rect.top - tooltipRect.height - 8}px`;
+ tooltip.style.left = `${rect.left + (rect.width / 2) - (tooltipRect.width / 2)}px`;
+ };
+
+ const hideTooltip = () => {
+ tooltip.classList.remove('show');
+ };
+
+ document.addEventListener('mouseover', (e) => {
+ const target = e.target.closest('[data-tooltip]');
+ if (target) {
+ clearTimeout(tooltipTimeout);
+ tooltipTimeout = setTimeout(() => showTooltip(target, target.getAttribute('data-tooltip')), 400);
+ }
+ });
+
+ document.addEventListener('mouseout', (e) => {
+ const target = e.target.closest('[data-tooltip]');
+ if (target) {
+ clearTimeout(tooltipTimeout);
+ hideTooltip();
+ }
+ });
+
// Init Focus Mode
const initFocusMode = () => {
if(localStorage.getItem('md_focus_mode') === 'true') {
@@ -50,12 +88,32 @@ document.addEventListener('DOMContentLoaded', () => {
document.body.classList.add('focus-mode');
localStorage.setItem('md_focus_mode', 'true');
window.dispatchEvent(new Event('focusModeEnabled'));
+
+ // Custom UI logic for focus mode
+ const pillGroup = document.querySelector('.action-pill-group');
+ if (pillGroup) {
+ pillGroup.querySelectorAll('button:not(#btn-share):not(#btn-pdf):not(#btn-exit-focus)').forEach(btn => {
+ btn.style.display = 'none';
+ });
+ document.getElementById('btn-exit-focus').style.display = 'flex';
+ }
+
window.showToast("
Focus Mode Enabled");
});
document.getElementById('btn-exit-focus')?.addEventListener('click', () => {
document.body.classList.remove('focus-mode');
localStorage.setItem('md_focus_mode', 'false');
+
+ // Revert UI changes
+ const pillGroup = document.querySelector('.action-pill-group');
+ if (pillGroup) {
+ pillGroup.querySelectorAll('button').forEach(btn => {
+ btn.style.display = 'flex';
+ });
+ document.getElementById('btn-exit-focus').style.display = 'none';
+ }
+
window.showToast("
Focus Mode Disabled");
});
diff --git a/style.css b/style.css
index 4d44802..79452db 100644
--- a/style.css
+++ b/style.css
@@ -628,6 +628,42 @@ body.dark-mode .action-pill-group {
margin: 0 4px;
}
+.toolbar-group {
+ display: flex;
+ align-items: center;
+ background-color: var(--toggle-track);
+ border-radius: 50px;
+ padding: 4px;
+ gap: 2px;
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+body.dark-mode .toolbar-group {
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.toolbar-group .tool-btn {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ opacity: 0.6;
+ background-color: transparent;
+}
+
+.toolbar-group .tool-btn:hover {
+ background-color: var(--toggle-pill);
+ opacity: 1;
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px var(--toggle-shadow);
+}
+
+.toolbar-group .tool-btn.active {
+ background-color: var(--toggle-pill);
+ color: var(--accent-color);
+ opacity: 1;
+ box-shadow: 0 2px 8px var(--toggle-shadow);
+}
+
.toolbar-spacer {
flex: 1;
min-width: 16px;
@@ -722,6 +758,14 @@ body.view-preview .divider {
/* ✨ FOCUS MODE CSS ✨ */
body.focus-mode .navbar {
+ display: flex !important;
+}
+
+body.focus-mode #mobile-menu-btn,
+body.focus-mode #nav-mode-toggle,
+body.focus-mode #btn-notes-desktop,
+body.focus-mode #btn-manage,
+body.focus-mode #btn-docs {
display: none !important;
}
@@ -731,12 +775,7 @@ body.focus-mode .editor-toolbar {
body.focus-mode #stat-words,
body.focus-mode #stat-chars,
-body.focus-mode #stat-reading-time,
-body.focus-mode .sb-theme-toggle,
-body.focus-mode #active-mode-indicator,
-body.focus-mode #btn-toggle-autosave,
-body.focus-mode #btn-sync-current,
-body.focus-mode #btn-push-github {
+body.focus-mode #stat-reading-time {
display: none !important;
}
@@ -744,18 +783,12 @@ body.focus-mode .toolbar-divider {
display: none !important;
}
-body.focus-mode #btn-manual-save {
- display: flex !important;
- margin-left: auto;
-}
-
body.focus-mode #btn-exit-focus {
display: flex !important;
- margin-left: 12px;
}
body.focus-mode .status-bar {
- justify-content: flex-end;
+ justify-content: space-between;
}
@@ -1175,215 +1208,127 @@ body.dark-mode .btn-cancel:hover {
/* ✨ ALL NOTES DASHBOARD ✨ */
.notes-dashboard-box {
- max-width: 1300px;
+ max-width: 600px;
width: 95vw;
- height: 88vh;
- padding: 0;
+ height: 80vh;
+ padding: 0 !important;
display: flex;
- flex-direction: row;
+ flex-direction: column;
overflow: hidden;
border-radius: 24px;
background-color: var(--bg-color);
- box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-color);
- position: relative;
-}
-
-.notes-dashboard-folders {
- width: 22%;
- min-width: 200px;
- display: flex;
- flex-direction: column;
- background-color: var(--hover-bg);
- border-right: 1px solid var(--border-color);
- padding-top: 20px;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- overflow: hidden;
-}
-
-.notes-dashboard-box.folders-collapsed .notes-dashboard-folders {
- width: 0 !important;
- min-width: 0 !important;
- opacity: 0;
- border-right: none !important;
- padding: 0 !important;
- margin: 0 !important;
+ box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);
}
-.folders-header {
- padding: 12px 20px;
+.notes-dashboard-header {
+ padding: 24px 32px;
+ background-color: var(--nav-bg);
+ border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
+ flex-shrink: 0;
}
-.pane-title {
- font-size: 0.75rem;
- font-weight: 700;
- color: var(--text-color);
- opacity: 0.5;
- letter-spacing: 1px;
-}
-
-.folders-list {
+.notes-dashboard-body {
flex: 1;
overflow-y: auto;
- padding: 12px;
+ padding: 24px;
+ background-color: var(--preview-bg);
}
-.folder-item {
- position: relative;
+.notes-dashboard-footer {
+ padding: 16px 32px;
+ background-color: var(--nav-bg);
+ border-top: 1px solid var(--border-color);
display: flex;
- align-items: center;
- gap: 10px;
- padding: 10px 14px;
- border-radius: 10px;
- cursor: pointer;
- transition: all 0.2s;
- font-size: 0.9rem;
- font-weight: 500;
- color: var(--text-color);
- margin-bottom: 4px;
- border: 1px solid transparent;
+ justify-content: center;
+ gap: 16px;
+ flex-shrink: 0;
}
-.folder-item:hover {
- background-color: rgba(128, 128, 128, 0.1);
+.dashboard-folder-section {
+ margin-bottom: 20px;
}
-.folder-item.active {
- background-color: var(--nav-bg);
+.dashboard-folder-title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 1rem;
+ font-weight: 700;
color: var(--accent-color);
- box-shadow: 0 2px 6px var(--shadow-color);
- font-weight: 600;
- border-color: var(--border-color);
+ padding: 8px 12px;
+ background-color: var(--hover-bg);
+ border-radius: 10px;
+ margin-bottom: 8px;
}
-.folder-item i {
- width: 16px;
- height: 16px;
- opacity: 0.8;
+.dashboard-notes-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding-left: 20px;
}
-.folder-del-btn {
- appearance: none;
- outline: none;
- background: transparent;
- border: none;
- color: var(--text-color);
- opacity: 0.3;
- width: 28px;
- height: 28px;
- border-radius: 6px;
+.dashboard-note-row {
display: flex;
align-items: center;
- justify-content: center;
+ justify-content: space-between;
+ padding: 10px 16px;
+ border-radius: 10px;
+ transition: background-color 0.2s;
cursor: pointer;
- transition: all 0.2s ease;
- padding: 0;
- margin-left: 4px;
-}
-
-.folder-del-btn i {
- width: 14px;
- height: 14px;
- margin: 0;
- pointer-events: none;
-}
-
-.folder-item:hover .folder-del-btn {
- opacity: 0.7;
}
-.folder-del-btn:hover {
- opacity: 1 !important;
- background-color: rgba(239, 68, 68, 0.15) !important;
- color: #ef4444 !important;
+.dashboard-note-row:hover {
+ background-color: var(--hover-bg);
}
-.notes-dashboard-left {
- width: 30%;
- min-width: 260px;
+.dashboard-note-info {
display: flex;
- flex-direction: column;
- background-color: var(--nav-bg);
- border-right: 1px solid var(--border-color);
+ align-items: center;
+ gap: 10px;
+ font-size: 0.95rem;
+ color: var(--text-color);
+ flex: 1;
}
-.notes-dashboard-left-header {
- padding: 24px 20px 16px;
- border-bottom: 1px solid var(--border-color);
+.dashboard-note-actions {
+ display: flex;
+ gap: 8px;
+ opacity: 0;
+ transition: opacity 0.2s;
}
-.notes-list {
- flex: 1;
- display: flex;
- flex-direction: column;
- overflow-y: auto;
- padding: 16px;
- gap: 12px;
- background: var(--hover-bg);
+.dashboard-note-row:hover .dashboard-note-actions {
+ opacity: 1;
}
-.note-item {
+.dashboard-action-btn {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
display: flex;
- justify-content: space-between;
align-items: center;
- padding: 16px;
- border-radius: 12px;
+ justify-content: center;
border: 1px solid var(--border-color);
- background-color: var(--bg-color);
+ background: transparent;
+ color: var(--text-color);
cursor: pointer;
- transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow: 0 2px 4px var(--shadow-color);
-}
-
-.note-item:hover {
- border-color: var(--text-color);
- transform: translateY(-2px);
- box-shadow: 0 6px 12px var(--shadow-color);
+ transition: all 0.2s;
}
-.note-item.active {
- background-color: var(--text-color);
+.dashboard-action-btn:hover {
+ background-color: var(--nav-bg);
border-color: var(--text-color);
- transform: translateY(-2px);
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
-}
-
-.note-title {
- font-size: 0.95rem;
- font-weight: 500;
- color: var(--text-color);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- display: flex;
- align-items: center;
- gap: 10px;
- transition: color 0.2s;
-}
-
-.note-title i {
- width: 16px;
- height: 16px;
- opacity: 0.7;
- flex-shrink: 0;
-}
-
-.note-item.active .note-title,
-.note-item.active span,
-.note-item.active i {
- color: var(--bg-color) !important;
- opacity: 1;
+ transform: scale(1.1);
}
-.notes-dashboard-right {
- flex: 1;
- display: flex;
- flex-direction: column;
- background-color: var(--bg-color);
- overflow: hidden;
- position: relative;
+.dashboard-action-btn.btn-delete:hover {
+ background-color: rgba(239, 68, 68, 0.1);
+ color: #ef4444;
+ border-color: #ef4444;
}
/* ✨ PERFECT DASHBOARD ACTIONS ✨ */
@@ -2209,7 +2154,7 @@ body.dark-mode .btn-help-cute:hover {
border-color: rgba(239, 68, 68, 0.2);
}
-/* ✨ CUSTOM CHECKBOX UI ✨ */
+/* ✨ CUSTOM CHECKBOX & TOGGLE UI ✨ */
.manage-custom-cb-container {
position: relative;
display: inline-flex;
@@ -2244,6 +2189,88 @@ body.dark-mode .btn-help-cute:hover {
border-color: var(--accent-color);
}
+/* TOGGLE SWITCH */
+.switch-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ cursor: pointer;
+}
+
+.switch-label {
+ font-size: 0.85rem;
+ font-weight: 600;
+}
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 22px;
+}
+
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: var(--toggle-track);
+ transition: .4s;
+ border-radius: 34px;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 16px;
+ width: 16px;
+ left: 3px;
+ bottom: 3px;
+ background-color: var(--toggle-pill);
+ transition: .4s;
+ border-radius: 50%;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+input:checked + .slider {
+ background-color: #10b981;
+}
+
+input:checked + .slider:before {
+ transform: translateX(18px);
+}
+
+/* CUSTOM TOOLTIP */
+.custom-tooltip {
+ position: fixed;
+ background-color: var(--accent-color);
+ color: var(--btn-text);
+ padding: 6px 12px;
+ border-radius: 8px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ z-index: 10000;
+ pointer-events: none;
+ opacity: 0;
+ transform: translateY(5px);
+ transition: opacity 0.2s ease, transform 0.2s ease;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+ white-space: nowrap;
+}
+
+.custom-tooltip.show {
+ opacity: 1;
+ transform: translateY(0);
+}
+
.collapse-icon {
width: 18px;