UBER-1010 (#3812)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

models/workbench/src/index.ts

@@ -39,7 +39,7 @@ export class TApplication extends TDoc implements Application {
   label!: IntlString
   icon!: Asset
   alias!: string
-  position?: 'top' | 'bottom'
+  position?: 'top' | 'mid'
   hidden!: boolean
 }
 

plugins/workbench-resources/src/components/Applications.svelte

@@ -32,6 +32,10 @@
     hiddenAppsIds = res.map((r) => r.attachedTo)
     loaded = true
   })
+
+  $: filteredApps = apps.filter((it) => !hiddenAppsIds.includes(it._id))
+  $: topApps = filteredApps.filter((it) => it.position === 'top')
+  $: bottomdApps = filteredApps.filter((it) => it.position !== 'top')
 </script>
 
 <div class="flex-{direction === 'horizontal' ? 'row-center' : 'col-center'} clear-mins apps-{direction} relative">
@@ -44,7 +48,13 @@
       contentDirection={direction}
       buttons={'union'}
     >
-      {#each apps.filter((it) => !hiddenAppsIds.includes(it._id)) as app}
+      {#each topApps as app}
+        <NavLink app={app.alias} shrink={0}>
+          <AppItem selected={app._id === active} icon={app.icon} label={app.label} />
+        </NavLink>
+      {/each}
+      <div class="divider" />
+      {#each bottomdApps as app}
         <NavLink app={app.alias} shrink={0}>
           <AppItem selected={app._id === active} icon={app.icon} label={app.label} />
         </NavLink>
@@ -60,11 +70,27 @@
     margin: 0 0.5rem 0 0.25rem;
     height: var(--app-panel-width);
     min-height: 4rem;
+
+    .divider {
+      margin-left: 0.5rem;
+      width: 1px;
+      height: 2.25rem;
+    }
   }
   .apps-vertical {
-    margin: 0.5rem 0;
+    margin-bottom: 0.5rem;
     width: var(--app-panel-width);
     min-width: 4rem;
+
+    .divider {
+      margin-top: 1rem;
+      width: 2.25rem;
+      height: 1px;
+    }
+  }
+  .divider {
+    flex-shrink: 0;
+    background-color: var(--theme-navpanel-icons-divider);
   }
   .apps-space {
     &-vertical {

plugins/workbench-resources/src/components/Workbench.svelte

@@ -643,7 +643,6 @@
             notify={hasNotification}
           />
         </NavLink>
-        <div class="divider" />
         <Applications apps={getApps(apps)} active={currentApplication?._id} direction={appsDirection} />
       </div>
       <div class="info-box {appsDirection}" class:vertical-mobile={appsDirection === 'vertical'} class:mini={appsMini}>
@@ -814,11 +813,6 @@
       .topmenu-container {
         margin-right: 0.5rem;
       }
-      .divider {
-        margin-left: 0.5rem;
-        width: 1px;
-        height: 2.25rem;
-      }
     }
     &.landscape {
       flex-direction: column;
@@ -830,16 +824,10 @@
       .topmenu-container {
         margin-bottom: 1rem;
       }
-      .divider {
-        margin-top: 1rem;
-        width: 2.25rem;
-        height: 1px;
-      }
     }
 
     .logo-container,
     .topmenu-container,
-    .divider,
     .spacer {
       flex-shrink: 0;
     }
@@ -860,10 +848,6 @@
     .topmenu-container.mini {
       left: calc(1.5rem + 8px);
     }
-    .divider {
-      flex-shrink: 0;
-      background-color: var(--theme-navpanel-icons-divider);
-    }
   }
 
   .info-box {

plugins/workbench/src/index.ts

@@ -28,6 +28,7 @@ export interface Application extends Doc {
   alias: string
   icon: Asset
   hidden: boolean
+  position?: 'top' | 'mid'
 
   // Also attached ApplicationNavModel will be joined after this one main.
   navigatorModel?: NavigatorModel