diff --git a/js/extension.js b/js/extension.js index 080b7a4..260eddd 100644 --- a/js/extension.js +++ b/js/extension.js @@ -226,25 +226,31 @@ class NotesSidebar { } createTabsContainer(parent) { + const tabsWrapper = document.createElement('div'); + tabsWrapper.className = 'notes-tabs-wrapper'; + + // Left side: tabs container for + button and note tabs this.tabsContainer = document.createElement('div'); this.tabsContainer.className = 'notes-tabs-container'; + const newTabBtn = document.createElement('button'); + newTabBtn.innerHTML = ''; + newTabBtn.title = 'New Note'; + newTabBtn.className = 'notes-new-tab-btn'; + newTabBtn.onclick = () => this.createNewNote(); + + this.tabsContainer.appendChild(newTabBtn); + + // Right side: refresh button const refreshBtn = document.createElement('button'); refreshBtn.innerHTML = ''; refreshBtn.className = 'notes-btn refresh'; refreshBtn.title = 'Refresh'; refreshBtn.onclick = () => this.refreshNotes(); - const newTabBtn = document.createElement('button'); - newTabBtn.innerHTML = ''; - // newTabBtn.textContent = '+'; - newTabBtn.title = 'New Note'; - newTabBtn.className = 'notes-new-tab-btn'; - newTabBtn.onclick = () => this.createNewNote(); - - this.tabsContainer.appendChild(refreshBtn); - this.tabsContainer.appendChild(newTabBtn); - parent.appendChild(this.tabsContainer); + tabsWrapper.appendChild(this.tabsContainer); + tabsWrapper.appendChild(refreshBtn); + parent.appendChild(tabsWrapper); } createNoteButtonContainer(parent) { @@ -406,9 +412,7 @@ class NotesSidebar { if (!confirm(`Are you sure you want to delete "${this.activeNote}"?`)) return; try { - const response = await fetch(`/notes_sidebar/note/${encodeURIComponent(this.activeNote)}`, { - method: 'DELETE' - }); + const response = await fetch(`/notes_sidebar/note/${encodeURIComponent(this.activeNote)}`, { method: 'DELETE' }); if (response.ok) { // Clean up tracking for deleted note diff --git a/js/notes-sidebar.css b/js/notes-sidebar.css index 9d02f8c..ff6bf19 100644 --- a/js/notes-sidebar.css +++ b/js/notes-sidebar.css @@ -8,16 +8,23 @@ color: #fff; } -.notes-tabs-container { +.notes-tabs-wrapper { display: flex; - flex-wrap: wrap; - gap: 2px; + justify-content: space-between; + align-items: flex-start; padding: 10px; background: #1a1a1a; border-bottom: 1px solid #444; min-height: 40px; } +.notes-tabs-container { + display: flex; + flex-wrap: wrap; + gap: 2px; + flex: 1; +} + .notes-new-tab-btn { background: #444; border: none; @@ -26,6 +33,7 @@ cursor: pointer; border-radius: 3px; font-size: 16px; + height: 32px; } .notes-new-tab-btn:hover { @@ -44,6 +52,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + height: 32px; } .note-tab:hover { @@ -105,6 +114,7 @@ cursor: pointer; border-radius: 4px; font-size: 14px; + height: 32px; } .notes-btn:hover {