[layout] split view UI enhancement

* #314: Folder View: Split Horizontal / Vertical for folder or code views
* Sidebar UI/UX enhancement
* SASS members addition for left/right handling
* link handling hook interface

dist/styles/bootstrap-darkster.css

@@ -9998,23 +9998,40 @@ h3 {
 }
 
 .right-handed .forest-layout {
-  border-right: 1px solid #000;
-}
-.right-handed .forest-layout:hover {
-  border-right: 1px solid #dee2e6;
+  border-right: 2px solid #dee2e6;
 }
 
 .left-handed .forest-layout {
-  border-left: 1px solid #000;
-}
-.left-handed .forest-layout:hover {
-  border-left: 1px solid #dee2e6;
+  border-left: 2px solid #dee2e6;
 }
 
-.forest-layout-teaser {
+.forest-layout-bottom-teaser {
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 45%);
 }
 
+.forest-layout-top-teaser {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 45%);
+}
+
+.main-page__horizontal-tiles {
+  border-top: 2px solid #dee2e6;
+}
+.main-page__horizontal-tiles .tile-block:not(:first-child) {
+  border-left: 2px solid #dee2e6;
+}
+
+.main-page__vertical-tiles {
+  border-left: 2px solid #dee2e6;
+}
+.main-page__vertical-tiles .tile-block:not(:first-child) {
+  border-top: 2px solid #dee2e6;
+}
+
+.tile-menu__popover {
+  border-radius: 0.25rem;
+  background-color: #000;
+}
+
 .navbar-dark.bg-primary {
   background-color: #111111 !important;
 }

dist/styles/bootstrap-default.css

@@ -9950,21 +9950,38 @@ h3 {
 }
 
 .right-handed .forest-layout {
-  border-right: 1px solid #fff;
-}
-.right-handed .forest-layout:hover {
-  border-right: 1px solid #dee2e6;
+  border-right: 2px solid #dee2e6;
 }
 
 .left-handed .forest-layout {
-  border-left: 1px solid #fff;
-}
-.left-handed .forest-layout:hover {
-  border-left: 1px solid #dee2e6;
+  border-left: 2px solid #dee2e6;
 }
 
-.forest-layout-teaser {
+.forest-layout-bottom-teaser {
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
 }
 
+.forest-layout-top-teaser {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
+}
+
+.main-page__horizontal-tiles {
+  border-top: 2px solid #dee2e6;
+}
+.main-page__horizontal-tiles .tile-block:not(:first-child) {
+  border-left: 2px solid #dee2e6;
+}
+
+.main-page__vertical-tiles {
+  border-left: 2px solid #dee2e6;
+}
+.main-page__vertical-tiles .tile-block:not(:first-child) {
+  border-top: 2px solid #dee2e6;
+}
+
+.tile-menu__popover {
+  border-radius: 0.25rem;
+  background-color: #fff;
+}
+
 /*# sourceMappingURL=bootstrap-default.css.map */

dist/styles/bootstrap-greyson.css

@@ -9706,21 +9706,38 @@ h3 {
 }
 
 .right-handed .forest-layout {
-  border-right: 1px solid #fff;
-}
-.right-handed .forest-layout:hover {
-  border-right: 1px solid #dee2e6;
+  border-right: 2px solid #dee2e6;
 }
 
 .left-handed .forest-layout {
-  border-left: 1px solid #fff;
-}
-.left-handed .forest-layout:hover {
-  border-left: 1px solid #dee2e6;
+  border-left: 2px solid #dee2e6;
 }
 
-.forest-layout-teaser {
+.forest-layout-bottom-teaser {
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
 }
 
+.forest-layout-top-teaser {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
+}
+
+.main-page__horizontal-tiles {
+  border-top: 2px solid #dee2e6;
+}
+.main-page__horizontal-tiles .tile-block:not(:first-child) {
+  border-left: 2px solid #dee2e6;
+}
+
+.main-page__vertical-tiles {
+  border-left: 2px solid #dee2e6;
+}
+.main-page__vertical-tiles .tile-block:not(:first-child) {
+  border-top: 2px solid #dee2e6;
+}
+
+.tile-menu__popover {
+  border-radius: 0.25rem;
+  background-color: #fff;
+}
+
 /*# sourceMappingURL=bootstrap-greyson.css.map */

dist/styles/bootstrap-herbie.css

@@ -9938,21 +9938,38 @@ h3 {
 }
 
 .right-handed .forest-layout {
-  border-right: 1px solid #fff;
-}
-.right-handed .forest-layout:hover {
-  border-right: 1px solid #dee2e6;
+  border-right: 2px solid #dee2e6;
 }
 
 .left-handed .forest-layout {
-  border-left: 1px solid #fff;
-}
-.left-handed .forest-layout:hover {
-  border-left: 1px solid #dee2e6;
+  border-left: 2px solid #dee2e6;
 }
 
-.forest-layout-teaser {
+.forest-layout-bottom-teaser {
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
 }
 
+.forest-layout-top-teaser {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
+}
+
+.main-page__horizontal-tiles {
+  border-top: 2px solid #dee2e6;
+}
+.main-page__horizontal-tiles .tile-block:not(:first-child) {
+  border-left: 2px solid #dee2e6;
+}
+
+.main-page__vertical-tiles {
+  border-left: 2px solid #dee2e6;
+}
+.main-page__vertical-tiles .tile-block:not(:first-child) {
+  border-top: 2px solid #dee2e6;
+}
+
+.tile-menu__popover {
+  border-radius: 0.25rem;
+  background-color: #fff;
+}
+
 /*# sourceMappingURL=bootstrap-herbie.css.map */

dist/styles/bootstrap-monotony.css

@@ -9955,21 +9955,38 @@ h3 {
 }
 
 .right-handed .forest-layout {
-  border-right: 1px solid #fff;
-}
-.right-handed .forest-layout:hover {
-  border-right: 1px solid #dee2e6;
+  border-right: 2px solid #dee2e6;
 }
 
 .left-handed .forest-layout {
-  border-left: 1px solid #fff;
-}
-.left-handed .forest-layout:hover {
-  border-left: 1px solid #dee2e6;
+  border-left: 2px solid #dee2e6;
 }
 
-.forest-layout-teaser {
+.forest-layout-bottom-teaser {
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 45%);
 }
 
+.forest-layout-top-teaser {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 45%);
+}
+
+.main-page__horizontal-tiles {
+  border-top: 2px solid #dee2e6;
+}
+.main-page__horizontal-tiles .tile-block:not(:first-child) {
+  border-left: 2px solid #dee2e6;
+}
+
+.main-page__vertical-tiles {
+  border-left: 2px solid #dee2e6;
+}
+.main-page__vertical-tiles .tile-block:not(:first-child) {
+  border-top: 2px solid #dee2e6;
+}
+
+.tile-menu__popover {
+  border-radius: 0.25rem;
+  background-color: #fff;
+}
+
 /*# sourceMappingURL=bootstrap-monotony.css.map */

dist/styles/sass.css

@@ -59,6 +59,10 @@
   line-height: 100%;
 }
 
+.tile-menu__item .fa {
+  margin-right: 8px;
+}
+
 .context-menu {
   position: absolute;
   left: 96px;
@@ -186,13 +190,6 @@
   border: 3px solid white;
 }
 
-#page-wrapper {
-  padding-top: 40px;
-  padding-left: 16px;
-  padding-right: 16px;
-  width: 100%;
-}
-
 #user-page-header {
   border-bottom: 1px solid black;
 }
@@ -392,10 +389,6 @@ li .leaf:hover a.settings {
   visibility: visible;
 }
 
-.forest-layout-content > .tree {
-  margin-top: 20px;
-}
-
 .tree ul li {
   position: relative;
 }
@@ -572,7 +565,6 @@ li .leaf:hover a.settings {
 }
 
 .forest-layout {
-  padding-top: 8px;
   z-index: 909;
   position: fixed;
   height: calc(100vh - 56px);
@@ -587,30 +579,81 @@ li .leaf:hover a.settings {
   display: none;
 }
 
-.forest-layout-teaser {
+.forest-layout-action {
+  display: flex;
+}
+.right-handed .forest-layout-action {
+  padding-left: 16px;
+  padding-right: 8px;
+}
+
+.left-handed .forest-layout-action {
+  padding-left: 8px;
+  padding-right: 16px;
+}
+
+.right-handed .forest-layout-action {
+  flex-direction: row;
+}
+.right-handed .forest-layout-action__button {
+  margin-right: 16px;
+}
+
+.left-handed .forest-layout-action {
+  flex-direction: row-reverse;
+}
+.left-handed .forest-layout-action__button {
+  margin-left: 16px;
+}
+
+.forest-layout-bottom-teaser {
+  z-index: 1;
   pointer-events: none;
   position: fixed;
   bottom: 0;
   height: 24px;
   width: calc(16.6666666667% - 1px);
 }
+.right-handed .forest-layout-bottom-teaser {
+  left: 0;
+}
+
+.left-handed .forest-layout-bottom-teaser {
+  right: 0;
+}
 
-.right-handed .forest-layout-teaser {
+.forest-layout-top-teaser {
+  z-index: 1;
+  pointer-events: none;
+  position: sticky;
+  top: 0;
+  height: 24px;
+  width: calc(100% - 1px);
+}
+.right-handed .forest-layout-top-teaser {
   left: 0;
 }
 
-.left-handed .forest-layout-teaser {
+.left-handed .forest-layout-top-teaser {
   right: 0;
 }
 
-.left-handed .forest-layout {
+.forest-layout-content > ul.tree {
+  margin-top: 24px;
+  margin-bottom: 0;
+}
+.right-handed .forest-layout-content > ul.tree {
+  padding-left: 16px;
+  padding-right: 8px;
+}
+
+.left-handed .forest-layout-content > ul.tree {
   padding-left: 8px;
   padding-right: 16px;
 }
 
-.right-handed .forest-layout {
-  padding-left: 16px;
-  padding-right: 8px;
+.forest-layout-content > ul.tree:last-child {
+  margin-bottom: 24px;
 }
 
 .code-editor .editor .code-area {
@@ -694,8 +737,10 @@ li .leaf:hover a.settings {
 }
 .code-editor .editor .html {
   flex-grow: 2;
-  margin-left: 25px;
-  padding-left: 25px;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 .code-editor .editor .html.language-haskell {
   font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
@@ -715,6 +760,12 @@ li .leaf:hover a.settings {
 .code-editor .editor .html.language-md ol li {
   list-style: decimal !important;
 }
+.code-editor__toolbar {
+  margin-bottom: 20px;
+}
+.code-editor__toolbar__type {
+  width: 200px;
+}
 
 .cache-toggle {
   cursor: pointer;
@@ -848,6 +899,79 @@ ul li {
   flex-direction: row;
 }
 
+.main-page {
+  flex-grow: 1;
+}
+.main-page__main-row {
+  display: flex;
+}
+.main-page__main-row--with-y-tiles .main-page__main-route {
+  width: 60%;
+}
+.main-page__main-row--with-y-tiles .main-page__vertical-tiles {
+  width: 40%;
+}
+.main-page__main-row--only-y-tiles {
+  min-height: calc( 100vh - 56px);
+}
+.main-page__main-route {
+  padding: 24px 32px;
+  width: 100%;
+}
+.main-page__vertical-tiles {
+  display: flex;
+  flex-direction: column;
+}
+.main-page__horizontal-tiles {
+  display: flex;
+  flex-direction: row;
+}
+.main-page__horizontal-tiles--1 .tile-block {
+  width: calc( 100% / 1);
+}
+.main-page__horizontal-tiles--2 .tile-block {
+  width: calc( 100% / 2);
+}
+.main-page__horizontal-tiles--3 .tile-block {
+  width: calc( 100% / 3);
+}
+.main-page__horizontal-tiles--4 .tile-block {
+  width: calc( 100% / 4);
+}
+.main-page__horizontal-tiles--5 .tile-block {
+  width: calc( 100% / 5);
+}
+.main-page__horizontal-tiles--6 .tile-block {
+  width: calc( 100% / 6);
+}
+.main-page__horizontal-tiles--7 .tile-block {
+  width: calc( 100% / 7);
+}
+.main-page__horizontal-tiles--8 .tile-block {
+  width: calc( 100% / 8);
+}
+.main-page__horizontal-tiles--9 .tile-block {
+  width: calc( 100% / 9);
+}
+.main-page__horizontal-tiles--10 .tile-block {
+  width: calc( 100% / 10);
+}
+
+.tile-block__header {
+  display: flex;
+}
+.right-handed .tile-block__header {
+  justify-content: flex-end;
+}
+
+.left-handed .tile-block__header {
+  justify-content: flex-start;
+}
+
+.tile-block__body {
+  padding: 4px 16px 12px;
+}
+
 .range {
   width: 400px;
   /* some space for the right knob */

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;ACrDF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAGN;EACE;;;AAIA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAEN;EAWE;;AAGE;EACE;;AAEA;EACE;;;AAUR;EAEE;EACA,MAFW;EAGX;;;AAEF;EAEE;EACA,OAFW;EAGX;;;AAGA;EACE;;AACF;EACE;;AACF;EACE;;;AAMF;EACE;;;AAEJ;EAEE;EACA;;;AAEF;EAEE;EACA;;;AAEF;EAGE;EACA;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AASJ;EAKE;EACA;EACA;EACA,QAPS;EAQT;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACI;EACA;;;AACJ;EACI;EACA;;;ACxPA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtFZ;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;ACnHJ;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACRxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/abstract/_members.scss","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AAME;EACE;;;AC9DN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC/IF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAEN;EAWE;;AAGE;EACE;;AAEA;EACE;;;AAUR;EAEE;EACA,MAFW;EAGX;;;AAEF;EAEE;EACA,OAFW;EAGX;;;AAGA;EACE;;AACF;EACE;;AACF;EACE;;;AAMF;EACE;;;AAEJ;EAEE;EACA;;;AAEF;EAEE;EACA;;;AAEF;EAGE;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AAKJ;EAGE;;AC9NS;ED/BP;EACA;;;ACqBO;EDlBP;EACA;;;AC0BO;EDiOP;;AAEA;EACE;;;AC7OK;EDgPP;;AAEA;EACE;;;AAON;EAIE;EAEA;EACA;EACA;EACA,QA9RmC;EA+RnC;;AC3PS;ED+PP;;;ACxQO;ED2QP;;;AAEJ;EAGE;EAEA;EACA;EACA;EACA,QAjTgC;EAkThC;;AC7QS;EDiRP;;;AC1RO;ED6RP;;;AAKF;EAIE;EACA;;AC9RO;ED/BP;EACA;;;ACqBO;EDlBP;EACA;;;AA0TA;EACE,eArU+B;;;AEsBjC;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;AAEV;EACE;;AAEA;EACE;;;AC9FN;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;AAGJ;EAKE;;AAEA;EACE;;AAIE;EACE;;AACF;EACE;;AAEJ;EAGE;;AAGJ;EACE,SAtBa;EAuBb;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKE;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;AAKN;EACE;;AFhIO;EEmIL;;;AF5IK;EE+IL;;;AAEJ;EACE,SAZa;;;ACpKjB;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACNxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file

spago.dhall

@@ -88,6 +88,7 @@ to generate this file without the comments in this block.
   , "unfoldable"
   , "unsafe-coerce"
   , "uri"
+  , "uuid"
   , "web-file"
   , "web-html"
   , "web-storage"

src/Gargantext/Components/App/Data.purs

@@ -11,7 +11,7 @@ import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
 import Gargantext.Components.Nodes.Lists.Types as ListsT
 import Gargantext.Components.Nodes.Texts.Types as TextsT
 import Gargantext.Ends (Backend)
-import Gargantext.Routes (AppRoute(Home))
+import Gargantext.Routes (AppRoute(Home), Tile)
 import Gargantext.Sessions (Session, Sessions)
 import Gargantext.Sessions as Sessions
 import Gargantext.Sessions.Types (OpenNodes(..))
@@ -19,68 +19,74 @@ import Gargantext.Types (FrontendError, Handed(RightHanded), SidePanelState(..))
 import Gargantext.Utils.Toestand as T2
 
 type App =
-  { backend        :: Maybe Backend
-  , errors         :: Array FrontendError
-  , forestOpen     :: OpenNodes
-  , graphVersion   :: T2.Reload
-  , handed         :: Handed
-  , reloadForest   :: T2.Reload
-  , reloadMainPage :: T2.Reload
-  , reloadRoot     :: T2.Reload
-  , route          :: AppRoute
-  , session        :: Maybe Session
-  , sessions       :: Sessions
-  , showCorpus     :: Boolean
-  , showLogin      :: Boolean
-  , showTree       :: Boolean
-  , sidePanelGraph :: Maybe (Record GEST.SidePanel)
-  , sidePanelLists :: Maybe (Record ListsT.SidePanel)
-  , sidePanelTexts :: Maybe (Record TextsT.SidePanel)
-  , sidePanelState :: SidePanelState
-  , tasks          :: GAT.Storage
+  { backend             :: Maybe Backend
+  , errors              :: Array FrontendError
+  , forestOpen          :: OpenNodes
+  , graphVersion        :: T2.Reload
+  , handed              :: Handed
+  , reloadForest        :: T2.Reload
+  , reloadMainPage      :: T2.Reload
+  , reloadRoot          :: T2.Reload
+  , route               :: AppRoute
+  , session             :: Maybe Session
+  , sessions            :: Sessions
+  , showCorpus          :: Boolean
+  , showLogin           :: Boolean
+  , showTree            :: Boolean
+  , sidePanelGraph      :: Maybe (Record GEST.SidePanel)
+  , sidePanelLists      :: Maybe (Record ListsT.SidePanel)
+  , sidePanelTexts      :: Maybe (Record TextsT.SidePanel)
+  , sidePanelState      :: SidePanelState
+  , tasks               :: GAT.Storage
+  , tileAxisXList       :: Array (Record Tile)
+  , tileAxisYList       :: Array (Record Tile)
   }
 
 emptyApp :: App
 emptyApp =
-  { backend        : Nothing
-  , errors         : []
-  , forestOpen     : OpenNodes $ Set.empty
-  , graphVersion   : T2.newReload
-  , handed         : RightHanded
-  , reloadForest   : T2.newReload
-  , reloadMainPage : T2.newReload
-  , reloadRoot     : T2.newReload
-  , route          : Home
-  , session        : Nothing
-  , sessions       : Sessions.empty
-  , showCorpus     : false
-  , showLogin      : false
-  , showTree       : true
-  , sidePanelGraph : GEST.initialSidePanel
-  , sidePanelLists : ListsT.initialSidePanel
-  , sidePanelTexts : TextsT.initialSidePanel
-  , sidePanelState : InitialClosed
-  , tasks          : GAT.empty
+  { backend             : Nothing
+  , errors              : []
+  , forestOpen          : OpenNodes $ Set.empty
+  , graphVersion        : T2.newReload
+  , handed              : RightHanded
+  , reloadForest        : T2.newReload
+  , reloadMainPage      : T2.newReload
+  , reloadRoot          : T2.newReload
+  , route               : Home
+  , session             : Nothing
+  , sessions            : Sessions.empty
+  , showCorpus          : false
+  , showLogin           : false
+  , showTree            : true
+  , sidePanelGraph      : GEST.initialSidePanel
+  , sidePanelLists      : ListsT.initialSidePanel
+  , sidePanelTexts      : TextsT.initialSidePanel
+  , sidePanelState      : InitialClosed
+  , tasks               : GAT.empty
+  , tileAxisXList       : mempty
+  , tileAxisYList       : mempty
   }
 
 type Boxes =
-  { backend        :: T.Box (Maybe Backend)
-  , errors         :: T.Box (Array FrontendError)
-  , forestOpen     :: T.Box OpenNodes
-  , graphVersion   :: T2.ReloadS
-  , handed         :: T.Box Handed
-  , reloadForest   :: T2.ReloadS
-  , reloadMainPage :: T2.ReloadS
-  , reloadRoot     :: T2.ReloadS
-  , route          :: T.Box AppRoute
-  , session        :: T.Box (Maybe Session)
-  , sessions       :: T.Box Sessions
-  , showCorpus     :: T.Box Boolean
-  , showLogin      :: T.Box Boolean
-  , showTree       :: T.Box Boolean
-  , sidePanelGraph :: T.Box (Maybe (Record GEST.SidePanel))
-  , sidePanelLists :: T.Box (Maybe (Record ListsT.SidePanel))
-  , sidePanelTexts :: T.Box (Maybe (Record TextsT.SidePanel))
-  , sidePanelState :: T.Box SidePanelState
-  , tasks          :: T.Box GAT.Storage
+  { backend             :: T.Box (Maybe Backend)
+  , errors              :: T.Box (Array FrontendError)
+  , forestOpen          :: T.Box OpenNodes
+  , graphVersion        :: T2.ReloadS
+  , handed              :: T.Box Handed
+  , reloadForest        :: T2.ReloadS
+  , reloadMainPage      :: T2.ReloadS
+  , reloadRoot          :: T2.ReloadS
+  , route               :: T.Box AppRoute
+  , session             :: T.Box (Maybe Session)
+  , sessions            :: T.Box Sessions
+  , showCorpus          :: T.Box Boolean
+  , showLogin           :: T.Box Boolean
+  , showTree            :: T.Box Boolean
+  , sidePanelGraph      :: T.Box (Maybe (Record GEST.SidePanel))
+  , sidePanelLists      :: T.Box (Maybe (Record ListsT.SidePanel))
+  , sidePanelTexts      :: T.Box (Maybe (Record TextsT.SidePanel))
+  , sidePanelState      :: T.Box SidePanelState
+  , tasks               :: T.Box GAT.Storage
+  , tileAxisXList       :: T.Box (Array (Record Tile))
+  , tileAxisYList       :: T.Box (Array (Record Tile))
   }

src/Gargantext/Components/CodeEditor.purs

@@ -123,9 +123,9 @@ codeEditorCpt = here.component "codeEditor" cpt
 
       pure $ H.div { className: "code-editor" }
         [ toolbar { controls, onChange }
-        , H.div { className: "row error" }
+        , H.div { className: "row no-gutters error" }
           [ errorComponent {error: controls.error} ]
-        , H.div { className: "row editor" }
+        , H.div { className: "row no-gutters editor" }
           [ H.div { className: "code-area " <> (codeHidden viewType') }
             [ H.div { className: "code-container" }
               [ H.textarea { defaultValue: codeS'
@@ -217,15 +217,15 @@ toolbarCpt = here.component "toolbar" cpt
       codeType' <- T.useLive T.unequal codeType
 
       pure $
-        H.div { className: "row toolbar" }
-          [ H.div { className: "col-2" }
+        H.div { className: "row no-gutters align-items-center mb-3 code-editor__toolbar" }
+          [ H.div { className: "code-editor__toolbar__type" }
                [ codeTypeSelector {
                    codeType
                   -- Handle rerendering of preview when viewType changed
                  , onChange: \ct -> onChange ct codeS'
                  }
                ]
-          , H.div { className: "col-1" }
+          , H.div {}
              [ viewTypeSelector {state: viewType} [] ]
           ]
 
@@ -246,7 +246,7 @@ errorComponentCpt = here.component "errorComponent" cpt
 
       pure $ case error' of
         Nothing -> H.div {} []
-        Just err -> H.div { className: "text-danger" } [ H.text err ]
+        Just err -> H.div { className: "text-danger mb-3" } [ H.text err ]
 
 
 type CodeTypeSelectorProps =

src/Gargantext/Components/ErrorsView.purs

@@ -26,7 +26,7 @@ errorsViewCpt = here.component "errorsView" cpt
   where
     cpt { errors } _ = do
       errors' <- T.useLive T.unequal errors
-      
+
       pure $ H.div {}
         ( mapWithIndex (showError errors) errors' )
     showError errors i (FStringError { error }) =

src/Gargantext/Components/FolderView.purs

@@ -76,7 +76,7 @@ folderViewCpt = here.component "folderViewCpt" cpt where
     where
       errorHandler err = here.log2 "[folderView] RESTError" err
 
-type FolderViewProps = 
+type FolderViewProps =
   ( backFolder    :: Boolean
   , boxes         :: Boxes
   , folders       :: FTree
@@ -140,7 +140,7 @@ folderViewMainCpt = here.component "folderViewMainCpt" cpt where
   isBackHome _ = false
 
 
-type FolderSimpleProps = 
+type FolderSimpleProps =
   (
     style :: FolderStyle
   , text :: String
@@ -161,7 +161,7 @@ folderSimpleCpt = here.component "folderSimpleCpt" cpt where
       [ H.i { className: icon style nodeType } []
       , H.br {}
       , H.text text ]
-  
+
   icon :: FolderStyle -> GT.NodeType -> String
   icon FolderUp _ = "fa fa-folder-open"
   icon _ nodeType = GT.fldr nodeType false
@@ -169,7 +169,7 @@ folderSimpleCpt = here.component "folderSimpleCpt" cpt where
   getFolderPath :: GT.NodeType -> GT.SessionId -> Int -> String
   getFolderPath nodeType sid nodeId = appPath $ fromMaybe Home $ nodeTypeAppRoute nodeType sid nodeId
 
-type FolderProps = 
+type FolderProps =
   ( boxes         :: Boxes
   , parentId      :: Int
   , reload        :: T.Box T2.Reload
@@ -197,24 +197,24 @@ folderCpt = here.component "folderCpt" cpt where
     R.useEffect' $ do
         R.setRef setPopoverRef $ Just $ Popover.setOpen popoverRef
 
-    pure $ 
+    pure $
         H.div {} [
         H.span{style: {position: "absolute"}} [ Popover.popover {
             arrow: false
           , open: false
           , onClose: \_ -> pure unit