Add workbench tabs (#6788)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

packages/ui/src/components/internal/Root.svelte

@@ -161,7 +161,7 @@
             </button>
           </div>
         {/if}
-        <div class="flex-row-center" style:-webkit-app-region={'no-drag'}>
+        <div class="flex-row-center left-items" style:-webkit-app-region={'no-drag'}>
           <RootBarExtension position="left" />
         </div>
         <div
@@ -267,4 +267,8 @@
       }
     }
   }
+
+  .left-items {
+    overflow-x: auto;
+  }
 </style>

packages/ui/src/components/internal/RootBarExtension.svelte

@@ -11,9 +11,11 @@
     }
     oldLoc = newLocation.path[0]
   })
+
+  $: sorted = $rootBarExtensions.sort((a, b) => a[1].order - b[1].order)
 </script>
 
-{#each $rootBarExtensions as ext (ext[1].id)}
+{#each sorted as ext (ext[1].id)}
   {#if ext[0] === position}
     <div id={ext[1].id} style:margin-right={'1px'}>
       <Component