tab row styling change

src/public/javascripts/services/tab_row.js

@@ -29,6 +29,7 @@ const tabTemplate = `
 </div>`;
 
 const newTabButtonTemplate = `<div class="note-new-tab" title="Add new tab">+</div>`;
+const fillerTemplate = `<div class="tab-row-filler"></div>`;
 
 class TabRow {
     constructor(el) {
@@ -40,9 +41,10 @@ class TabRow {
 
         this.setupStyleEl();
         this.setupEvents();
-        this.layoutTabs();
         this.setupDraggabilly();
         this.setupNewButton();
+        this.setupFiller();
+        this.layoutTabs();
         this.setVisibility();
     }
 
@@ -109,12 +111,17 @@ class TabRow {
 
         const widths = [];
         let extraWidthRemaining = totalExtraWidthDueToFlooring;
+
         for (let i = 0; i < numberOfTabs; i += 1) {
             const extraWidth = flooredClampedTargetWidth < TAB_CONTENT_MAX_WIDTH && extraWidthRemaining > 0 ? 1 : 0;
             widths.push(flooredClampedTargetWidth + extraWidth);
             if (extraWidthRemaining > 0) extraWidthRemaining -= 1;
         }
 
+        if (this.fillerEl) {
+            this.fillerEl.style.width = extraWidthRemaining + "px";
+        }
+
         return widths;
     }
 
@@ -129,8 +136,9 @@ class TabRow {
         });
 
         const newTabPosition = position;
+        const fillerPosition = position + 32;
 
-        return {tabPositions, newTabPosition};
+        return {tabPositions, newTabPosition, fillerPosition};
     }
 
     layoutTabs() {
@@ -151,13 +159,14 @@ class TabRow {
 
         let styleHTML = '';
 
-        const {tabPositions, newTabPosition} = this.getTabPositions();
+        const {tabPositions, newTabPosition, fillerPosition} = this.getTabPositions();
 
         tabPositions.forEach((position, i) => {
             styleHTML += `.note-tab:nth-child(${ i + 1 }) { transform: translate3d(${ position }px, 0, 0)} `;
         });
 
         styleHTML += `.note-new-tab { transform: translate3d(${ newTabPosition }px, 0, 0) } `;
+        styleHTML += `.tab-row-filler { transform: translate3d(${ fillerPosition }px, 0, 0) } `;
 
         this.styleEl.innerHTML = styleHTML;
     }
@@ -387,11 +396,18 @@ class TabRow {
         this.newTabEl = div.firstElementChild;
 
         this.tabContentEl.appendChild(this.newTabEl);
-        this.layoutTabs();
 
         this.newTabEl.addEventListener('click', _ => this.emit('newTab'));
     }
 
+    setupFiller() {
+        const div = document.createElement('div');
+        div.innerHTML = fillerTemplate;
+        this.fillerEl = div.firstElementChild;
+
+        this.tabContentEl.appendChild(this.fillerEl);
+    }
+
     closest(value, array) {
         let closest = Infinity;
         let closestIndex = -1;

src/public/javascripts/services/tree.js

@@ -368,7 +368,7 @@ async function treeInitialized() {
         const notePath = location.hash.substr(1);
         const noteId = treeUtils.getNoteIdFromNotePath(notePath);
 
-        if (await treeCache.noteExists(noteId)) {
+        if (noteId && await treeCache.noteExists(noteId)) {
             for (const tab of openTabs) {
                 tab.active = false;
             }

src/public/javascripts/services/tree_cache.js

@@ -144,7 +144,7 @@ class TreeCache {
             else {
                 return this.notes[noteId];
             }
-        }).filter(note => note !== null);
+        }).filter(note => !!note);
     }
 
     /** @return {Promise<boolean>} */

src/public/stylesheets/desktop.css

@@ -68,6 +68,11 @@ body {
     margin-bottom: 2px;
     margin-top: 2px;
     margin-right: 8px;
+    border-color: transparent !important;
+}
+
+#header button:hover {
+    border-color: var(--button-border-color) !important;
 }
 
 #history-navigation {
@@ -215,7 +220,7 @@ body {
 .note-new-tab {
     position: absolute;
     left: 0;
-    height: 32px;
+    height: 33px;
     width: 32px;
     border: 0;
     margin: 0;
@@ -223,6 +228,7 @@ body {
     text-align: center;
     font-size: 24px;
     cursor: pointer;
+    border-bottom: 1px solid var(--button-border-color);
 }
 
 .note-new-tab:hover {
@@ -230,6 +236,14 @@ body {
     border-radius: 5px;
 }
 
+.tab-row-filler {
+    position: absolute;
+    left: 0;
+    background: linear-gradient(to right, var(--button-border-color), transparent);
+    height: 1px;
+    margin-top: 32px;
+}
+
 .note-tab-row .note-tab[active] {
     z-index: 5;
 }
@@ -244,6 +258,7 @@ body {
     top: 10px;
     animation: note-tab-was-just-added 120ms forwards ease-in-out;
 }
+
 .note-tab-row .note-tab .note-tab-wrapper {
     position: absolute;
     display: flex;
@@ -271,6 +286,7 @@ body {
     padding-left: 2px;
     padding-right: 2px;
 }
+
 .note-tab-row .note-tab .note-tab-title {
     flex: 1;
     vertical-align: top;
@@ -278,12 +294,15 @@ body {
     white-space: nowrap;
     color: var(--muted-text-color);
 }
+
 .note-tab-row .note-tab[is-small] .note-tab-title {
     margin-left: 0;
 }
+
 .note-tab-row .note-tab[active] .note-tab-title {
     color: var(--main-text-color);
 }
+
 .note-tab-row .note-tab .note-tab-drag-handle {
     position: absolute;
     top: 0;
@@ -293,6 +312,7 @@ body {
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
+
 .note-tab-row .note-tab .note-tab-close {
     flex-grow: 0;
     flex-shrink: 0;