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 {