initial experiments with tabs

libraries/chrome-tabs/chrome-tabs.css

@@ -0,0 +1,175 @@
+.chrome-tabs {
+  box-sizing: border-box;
+  position: relative;
+  height: 33px;
+  background: var(--main-background-color);
+  border-radius: 5px 5px 0 0;
+  overflow: hidden;
+}
+.chrome-tabs * {
+  box-sizing: inherit;
+  font: inherit;
+}
+.chrome-tabs .chrome-tabs-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.chrome-tabs .chrome-tab {
+  position: absolute;
+  left: 0;
+  height: 36px;
+  width: 240px;
+  border: 0;
+  margin: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.chrome-tabs .chrome-tab[active] {
+  z-index: 5;
+}
+
+.chrome-tabs .chrome-tab,
+.chrome-tabs .chrome-tab * {
+  user-select: none;
+  cursor: default;
+}
+
+.chrome-tabs .chrome-tab.chrome-tab-was-just-added {
+  top: 10px;
+  animation: chrome-tab-was-just-added 120ms forwards ease-in-out;
+}
+.chrome-tabs .chrome-tab .chrome-tab-content {
+  position: absolute;
+  display: flex;
+  top: 0;
+  bottom: 0;
+  left: var(--tab-content-margin);
+  right: var(--tab-content-margin);
+  padding: 5px 8px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  overflow: hidden;
+  pointer-events: all;
+  background-color: var(--accented-background-color);
+}
+
+.chrome-tabs .chrome-tab[active] .chrome-tab-content {
+  background-color: var(--more-accented-background-color);
+}
+
+.chrome-tabs .chrome-tab[is-mini] .chrome-tab-content {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.chrome-tabs .chrome-tab .chrome-tab-title {
+  flex: 1;
+  vertical-align: top;
+  overflow: hidden;
+  white-space: nowrap;
+  color: var(--muted-text-color);
+}
+.chrome-tabs .chrome-tab[is-small] .chrome-tab-title {
+  margin-left: 0;
+}
+.chrome-tabs .chrome-tab[active] .chrome-tab-title {
+  color: var(--main-text-color);
+}
+.chrome-tabs .chrome-tab .chrome-tab-drag-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+.chrome-tabs .chrome-tab .chrome-tab-close {
+  flex-grow: 0;
+  flex-shrink: 0;
+  position: relative;
+  top: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path stroke='rgba(0, 0, 0, .65)' stroke-linecap='square' stroke-width='1.5' d='M0 0 L8 8 M8 0 L0 8'></path></svg>");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 8px 8px;
+}
+@media (hover: hover) {
+  .chrome-tabs .chrome-tab .chrome-tab-close:hover {
+    background-color: var(--more-accented-background-color);
+  }
+  .chrome-tabs .chrome-tab .chrome-tab-close:hover:active {
+    background-color: var(--more-accented-background-color);
+  }
+}
+@media not all and (hover: hover) {
+  .chrome-tabs .chrome-tab .chrome-tab-close:active {
+    background-color: #dadce0;
+  }
+}
+@media (hover: hover) {
+  .chrome-tabs .chrome-tab:not([active]) .chrome-tab-close:not(:hover):not(:active) {
+    opacity: 0.8;
+  }
+}
+.chrome-tabs .chrome-tab[is-smaller] .chrome-tab-close {
+  margin-left: auto;
+}
+.chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-close {
+  display: none;
+}
+.chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-close {
+  margin-left: auto;
+  margin-right: auto;
+}
+@-moz-keyframes chrome-tab-was-just-added {
+  to {
+    top: 0;
+  }
+}
+@-webkit-keyframes chrome-tab-was-just-added {
+  to {
+    top: 0;
+  }
+}
+@-o-keyframes chrome-tab-was-just-added {
+  to {
+    top: 0;
+  }
+}
+@keyframes chrome-tab-was-just-added {
+  to {
+    top: 0;
+  }
+}
+.chrome-tabs.chrome-tabs-is-sorting .chrome-tab:not(.chrome-tab-is-dragging),
+.chrome-tabs:not(.chrome-tabs-is-sorting) .chrome-tab.chrome-tab-was-just-dragged {
+  transition: transform 120ms ease-in-out;
+}
+.chrome-tabs .chrome-tabs-bottom-bar {
+  position: absolute;
+  bottom: 0;
+  height: 4px;
+  left: 0;
+  width: 100%;
+  background: #fff;
+  z-index: 10;
+}
+.chrome-tabs-optional-shadow-below-bottom-bar {
+  position: relative;
+  height: 1px;
+  width: 100%;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1'><rect x='0' y='0' width='1' height='1' fill='rgba(0, 0, 0, .17)'></rect></svg>");
+  background-size: 1px 1px;
+  background-repeat: repeat-x;
+  background-position: 0% 0%;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  .chrome-tabs-optional-shadow-below-bottom-bar {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'><rect x='0' y='0' width='2' height='1' fill='rgba(0, 0, 0, .27)'></rect></svg>");
+  }
+}

src/public/javascripts/desktop.js

@@ -156,4 +156,14 @@ noteTypeService.init();
 
 linkService.init();
 
-noteAutocompleteService.init();
+noteAutocompleteService.init();
+
+$(document).ready(() => {
+    const el = $('.chrome-tabs')[0];
+    const chromeTabs = new ChromeTabs();
+    chromeTabs.init(el);
+
+    el.addEventListener('activeTabChange', ({detail}) => console.log('Active tab changed', detail.tabEl));
+    el.addEventListener('tabAdd', ({detail}) => console.log('Tab added', detail.tabEl));
+    el.addEventListener('tabRemove', ({detail}) => console.log('Tab removed', detail.tabEl));
+});

src/public/stylesheets/desktop.css

@@ -8,10 +8,12 @@ body {
 
     display: grid;
     grid-template-areas: "header header"
+    "left-pane tabs"
     "left-pane title"
     "left-pane note-detail";
     grid-template-rows: auto
     auto
+    auto
     1fr;
 
     justify-content: center;

src/public/stylesheets/style.css

@@ -231,6 +231,10 @@ button.close {
     grid-area: title;
 }
 
+#tabs-container {
+    grid-area: tabs;
+}
+
 #note-title {
     margin-left: 15px;
     margin-right: 10px;

src/views/desktop.ejs

@@ -150,6 +150,41 @@
         <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
     </div>
 
+    <div id="tabs-container">
+        <div class="chrome-tabs">
+            <div class="chrome-tabs-content">
+                <div class="chrome-tab">
+                    <div class="chrome-tab-content">
+                        <div class="chrome-tab-title">Google</div>
+                        <div class="chrome-tab-drag-handle"></div>
+                        <div class="chrome-tab-close"></div>
+                    </div>
+                </div>
+                <div class="chrome-tab" active>
+                    <div class="chrome-tab-content">
+                        <div class="chrome-tab-title">Facebook</div>
+                        <div class="chrome-tab-drag-handle"></div>
+                        <div class="chrome-tab-close"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Styles to prevent flash after JS initialization -->
+            <style>
+                .chrome-tabs .chrome-tab {
+                    width: 258px
+                }
+
+                .chrome-tabs .chrome-tab:nth-child(1) {
+                    transform: translate3d(0px, 0, 0)
+                }
+
+                .chrome-tabs .chrome-tab:nth-child(2) {
+                    transform: translate3d(239px, 0, 0)
+                }
+            </style>
+        </div>
+    </div>
+
     <div id="title-container">
         <div style="display: flex; align-items: center;">
             <div class="dropdown hide-toggle">
@@ -290,6 +325,9 @@
 
 <script src="libraries/dayjs.min.js"></script>
 
+<script src="libraries/chrome-tabs/chrome-tabs.js"></script>
+<link href="libraries/chrome-tabs/chrome-tabs.css" rel="stylesheet">
+
 <link href="stylesheets/style.css" rel="stylesheet">
 <link href="stylesheets/desktop.css" rel="stylesheet">