The alarm button in the sidebar for the Meeting (#7260)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

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

@@ -21,13 +21,14 @@
   export let icon: Asset | AnySvelteComponent
   export let selected: boolean = false
   export let size: 'small' | 'medium' | 'large' = 'large'
+  export let kind: 'default' | 'positive' | 'negative' = 'default'
   export let loading: boolean = false
   export let notify: boolean = false
   export let navigator: boolean = false
 </script>
 
 <button
-  class="app {size}"
+  class="app {size} {kind}"
   class:loading
   class:selected
   class:navigator
@@ -104,6 +105,36 @@
     &.navigator {
       border-color: var(--theme-button-border);
     }
+    &.positive {
+      background-color: var(--positive-button-default);
+      &:hover {
+        background-color: var(--positive-button-hovered);
+      }
+      &:active,
+      &.selected {
+        background-color: var(--positive-button-pressed);
+      }
+      &.selected:hover {
+        background-color: var(--positive-button-focused);
+      }
+    }
+    &.negative {
+      background-color: var(--negative-button-default);
+      &:hover {
+        background-color: var(--negative-button-hovered);
+      }
+      &:active,
+      &.selected {
+        background-color: var(--negative-button-pressed);
+      }
+      &.selected:hover {
+        background-color: var(--negative-button-focused);
+      }
+    }
+    &.positive .icon-container,
+    &.negative .icon-container {
+      color: var(--theme-caption-color);
+    }
   }
 
   .marker {

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

@@ -636,10 +636,10 @@
 
   $deviceInfo.navigator.float = !(workbenchWidth < 1024)
   const checkWorkbenchWidth = (): void => {
-    if (workbenchWidth <= 1024 && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) {
+    if (workbenchWidth <= 720 && !$deviceInfo.navigator.float && $deviceInfo.navigator.visible) {
       $deviceInfo.navigator.visible = false
       $deviceInfo.navigator.float = true
-    } else if (workbenchWidth > 1024 && $deviceInfo.navigator.float) {
+    } else if (workbenchWidth > 720 && $deviceInfo.navigator.float) {
       if (getMetadata(workbench.metadata.NavigationExpandedDefault) === undefined) {
         $deviceInfo.navigator.float = false
         $deviceInfo.navigator.visible = true

plugins/workbench-resources/src/components/sidebar/widgets/WidgetPresenter.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Widget } from '@hcengineering/workbench'
-  import { Label } from '@hcengineering/ui'
+  import { Label, Component } from '@hcengineering/ui'
 
   import AppItem from '../../AppItem.svelte'
 
@@ -24,7 +24,11 @@
 </script>
 
 <div class="root">
-  <AppItem label={widget.label} icon={widget.icon} selected={highlighted} size="small" on:click />
+  <Component
+    is={widget.switcherComponent ?? AppItem}
+    props={{ label: widget.label, icon: widget.icon, selected: highlighted, size: 'small' }}
+    on:click
+  />
   {#if withLabel}
     <Label label={widget.label} />
   {/if}