drag and drop support for tabs

package.json

@@ -16,6 +16,7 @@
         "dayjs": "^1.11.3",
         "dompurify": "^3.0.2",
         "electron-squirrel-startup": "^1.0.0",
+        "framer-motion": "^10.16.16",
         "mobx": "6.12",
         "mobx-react": "^7.5.0",
         "monaco-editor": "^0.44.0",

src/app/magiclayout.ts

@@ -7,11 +7,11 @@ let MagicLayout = {
     CmdInputHeight: 101, // height of full cmd-input div
     CmdInputBottom: 12, // .cmd-input
 
-    LineHeaderHeight: 46,   // .line-header
-    LinePadding: 24,        // .line-header (12px * 2)
-    WindowHeightOffset: 6,  // .window-view, height is calc(100%-0.5rem)
+    LineHeaderHeight: 46, // .line-header
+    LinePadding: 24, // .line-header (12px * 2)
+    WindowHeightOffset: 6, // .window-view, height is calc(100%-0.5rem)
     LinesBottomPadding: 10, // .lines, padding
-    LineMarginTop: 12,      // .line, margin
+    LineMarginTop: 12, // .line, margin
 
     ScreenMaxContentWidthBuffer: 50,
     ScreenMaxContentHeightBuffer: 0, // calc below
@@ -21,12 +21,15 @@ let MagicLayout = {
     // the 3 is for descenders, which get cut off in the terminal without this
     TermDescendersHeight: 3,
     TermWidthBuffer: 15,
+
+    TabWidth: 175,
 };
 
 let m = MagicLayout;
 
 // add up all the line overhead + padding.  subtract 2 so we don't see the border of neighboring line
-m.ScreenMaxContentHeightBuffer = m.LineHeaderHeight + m.LinePadding + m.WindowHeightOffset + m.LinesBottomPadding + m.LineMarginTop - 2;
+m.ScreenMaxContentHeightBuffer =
+    m.LineHeaderHeight + m.LinePadding + m.WindowHeightOffset + m.LinesBottomPadding + m.LineMarginTop - 2;
 
 (window as any).MagicLayout = MagicLayout;
 

src/app/workspace/screen/tabs.less

@@ -220,84 +220,108 @@
     }
 }
 
-.screen-tabs {
+.screen-tabs-container {
     display: flex;
-    flex-direction: row;
-    overflow-x: hidden;
-    align-items: center;
+    position: relative;
+    overflow: hidden;
 
-    &:hover,
-    &:focus {
-        overflow-x: auto;
+    &:hover {
+        z-index: 200;
     }
 
-    .screen-tab {
+    &:hover .cmd-hints {
         display: flex;
-        height: 3em;
-        min-width: 14em;
-        max-width: 14em;
-        align-items: center;
-        cursor: pointer;
-        position: relative;
+    }
+
+    .cmd-hints {
+        position: absolute;
+        bottom: -18px;
+        left: 0px;
+        display: flex;
+    }
 
-        .icon.svg-icon {
-            margin: 0 12px;
+    .screen-tabs {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        overflow-x: hidden;
 
-            svg {
-                width: 14px;
-                height: 14px;
-            }
+        &:hover,
+        &:focus {
+            overflow-x: overlay;
         }
 
-        .icon.fa-icon {
-            font-size: 16px;
-            margin: 0 12px;
-        }
+        .screen-tab {
+            display: flex;
+            height: 3em;
+            min-width: 14em;
+            max-width: 14em;
+            align-items: center;
+            cursor: pointer;
+            position: relative;
 
-        .tab-name {
-            width: 8rem;
-        }
+            .icon.svg-icon {
+                margin: 0 12px;
 
-        &.is-active {
-            border-top: none;
-            opacity: 1;
-        }
+                svg {
+                    width: 14px;
+                    height: 14px;
+                }
+            }
 
-        &.is-archived {
-            .fa.fa-archive {
-                margin-right: 4px;
+            .icon.fa-icon {
+                font-size: 16px;
+                margin: 0 12px;
             }
-        }
 
-        .tab-index,
-        .tab-gear {
-            display: none;
-            .icon {
-                border-radius: 50%;
+            .tab-name {
+                width: 8rem;
+            }
+
+            &.is-active {
+                border-top: none;
+                opacity: 1;
+            }
+
+            &.is-archived {
+                .fa.fa-archive {
+                    margin-right: 4px;
+                }
             }
-        }
 
-        &:hover {
+            .tab-index,
             .tab-gear {
-                display: block;
+                display: none;
+                .icon {
+                    border-radius: 50%;
+                }
+            }
+
+            &:hover {
+                .tab-gear {
+                    display: block;
+                }
             }
         }
-    }
 
-    &:hover .screen-tab .tab-index {
-        display: block;
-        font-size: 0.8em;
-    }
+        &:hover .screen-tab .tab-index {
+            display: block;
+            font-size: 0.8em;
+        }
 
-    &:hover .screen-tab:hover .tab-index {
-        display: none;
+        &:hover .screen-tab:hover .tab-index {
+            display: none;
+        }
     }
 
     .new-screen {
         flex-shrink: 0;
         margin-left: 1em;
         margin-right: 1em;
         cursor: pointer;
+        display: flex;
+        align-items: center;
+
         .icon {
             height: 2rem;
             height: 2rem;
@@ -307,22 +331,3 @@
         }
     }
 }
-
-.screen-tabs-container {
-    position: relative;
-
-    &:hover {
-        z-index: 200;
-    }
-
-    &:hover .cmd-hints {
-        display: flex;
-    }
-
-    .cmd-hints {
-        position: absolute;
-        bottom: -18px;
-        left: 0px;
-        display: flex;
-    }
-}