From c74f48d04466d6320889f1f98f5378d34d1db6b7 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 12 Jan 2023 18:50:41 +0300
Subject: [PATCH] Update Notifications layout (#2500)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/ObjectPopup.svelte         |  11 +-
 .../src/components/ObjectSearchPopup.svelte   |   5 +-
 .../src/components/SpacesMultiPopup.svelte    |   4 +-
 packages/theme/styles/_layouts.scss           |   1 +
 packages/theme/styles/popups.scss             |  23 +-
 packages/ui/src/components/Button.svelte      |   3 +-
 packages/ui/src/components/ColorPopup.svelte  |   4 +-
 .../src/components/DropdownLabelsPopup.svelte |   4 +-
 .../ui/src/components/DropdownPopup.svelte    |   4 +-
 packages/ui/src/components/SelectPopup.svelte |   4 +-
 .../ui/src/components/icons/CheckAll.svelte   |  27 +++
 .../ui/src/components/icons/Delete.svelte     |   2 +-
 packages/ui/src/index.ts                      |   1 +
 packages/ui/src/popups.ts                     |   9 +
 .../src/components/TxView.svelte              |  20 +-
 .../src/components/CommentPresenter.svelte    |  53 +++--
 .../activity/TxBacklinkReference.svelte       |   2 +-
 .../components/EmployeePreviewPopup.svelte    |   9 +-
 plugins/notification-resources/package.json   |   3 +-
 .../src/components/NotificationView.svelte    | 214 +++++++++++++-----
 .../src/components/NotificationsPopup.svelte  |  45 ++--
 .../src/components/TagsDropdownEditor.svelte  |   2 -
 .../src/components/TagsFilter.svelte          |   5 +-
 .../src/components/TagsPopup.svelte           |   5 +-
 .../src/components/TemplatePopup.svelte       |   9 +-
 .../src/components/SpacesPopup.svelte         |   9 +-
 .../components/projects/ProjectBrowser.svelte |   2 +-
 .../components/sprints/SprintBrowser.svelte   |   2 +-
 .../templates/IssueTemplatesView.svelte       |   2 +-
 .../src/components/filter/ObjectFilter.svelte |   4 +-
 plugins/view-resources/src/index.ts           |   1 +
 31 files changed, 346 insertions(+), 143 deletions(-)
 create mode 100644 packages/ui/src/components/icons/CheckAll.svelte

diff --git a/packages/presentation/src/components/ObjectPopup.svelte b/packages/presentation/src/components/ObjectPopup.svelte
index eb5e07608c..20b32b2d8a 100644
--- a/packages/presentation/src/components/ObjectPopup.svelte
+++ b/packages/presentation/src/components/ObjectPopup.svelte
@@ -27,7 +27,8 @@
     ListView,
     showPopup,
     tooltip,
-    resizeObserver
+    resizeObserver,
+    deviceOptionsStore
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
@@ -206,7 +207,13 @@
   }}
 >
   <div class="header flex-between">
-    <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
+    <EditBox
+      kind={'search-style'}
+      focusIndex={1}
+      focus={!$deviceOptionsStore.isMobile}
+      bind:value={search}
+      {placeholder}
+    />
     {#if create !== undefined}
       <div class="mx-2">
         <Button
diff --git a/packages/presentation/src/components/ObjectSearchPopup.svelte b/packages/presentation/src/components/ObjectSearchPopup.svelte
index 2c4e77f971..9b4201c64e 100644
--- a/packages/presentation/src/components/ObjectSearchPopup.svelte
+++ b/packages/presentation/src/components/ObjectSearchPopup.svelte
@@ -25,7 +25,8 @@
     IconSearch,
     Label,
     ListView,
-    resizeObserver
+    resizeObserver,
+    deviceOptionsStore
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '../plugin'
@@ -171,7 +172,7 @@
       {/each}
     </div>
     <EditBox
-      focus
+      focus={!$deviceOptionsStore.isMobile}
       icon={IconSearch}
       kind={'search-style'}
       focusIndex={0}
diff --git a/packages/presentation/src/components/SpacesMultiPopup.svelte b/packages/presentation/src/components/SpacesMultiPopup.svelte
index 7344f4c3c0..2cd8d8564c 100644
--- a/packages/presentation/src/components/SpacesMultiPopup.svelte
+++ b/packages/presentation/src/components/SpacesMultiPopup.svelte
@@ -17,7 +17,7 @@
   import { translate } from '@hcengineering/platform'
   import { createEventDispatcher, onMount } from 'svelte'
   import core, { Class, getCurrentAccount, Ref, Space } from '@hcengineering/core'
-  import { tooltip, CheckBox, resizeObserver } from '@hcengineering/ui'
+  import { tooltip, CheckBox, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
   import { createQuery } from '../utils'
   import presentation from '..'
   import SpaceInfo from './SpaceInfo.svelte'
@@ -85,7 +85,7 @@
   }
 
   onMount(() => {
-    if (input) input.focus()
+    if (input && !$deviceOptionsStore.isMobile) input.focus()
   })
 </script>
 
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 697beb5a4e..5be8f0b563 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -452,6 +452,7 @@ input.search {
 .pt-3 { padding-top: .75rem; }
 .pt-4 { padding-top: 1rem; }
 .pt-6 { padding-top: 1.5rem; }
+.pb-1 { padding-bottom: .25rem; }
 .pb-2 { padding-bottom: .5rem; }
 .pb-3 { padding-bottom: .75rem; }
 .pb-4 { padding-bottom: 1rem; }
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 35fab7c743..4dc3bb254b 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -419,27 +419,30 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  width: max-content;
-  height: max-content;
-  padding-bottom: 0.5rem;
-  min-width: 42rem;
-  max-width: 42rem;
-  height: 22rem;
+  padding: .5rem;
   min-height: 22rem;
-  max-height: 22rem;
   background: var(--popup-bg-color);
-  border-radius: 0.5rem;
+  border-radius: .5rem;
   box-shadow: var(--popup-shadow);
 
   .header {
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    padding: 0 1rem;
+    padding: 0 .75rem .5rem 1rem;
     height: 3rem;
-    border-bottom: 1px solid var(--popup-divider);
+    min-height: 0;
+  }
+  .space {
+    flex-shrink: 0;
+    height: .25rem;
+    &.x2 { height: .5rem; }
+    &.x3 { height: .75rem; }
   }
 }
+.notifyPopup .comment::after,
+.notifyPopup .mention::after { content: none !important; }
+.notifyPopup .content .mention { margin-top: 0 !important; }
 
 .helpAndSupportPopup {
   min-height: 100%;
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 81f0d9f99f..22afc7579c 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -28,6 +28,7 @@
   export let size: ButtonSize = 'medium'
   export let shape: ButtonShape = undefined
   export let icon: Asset | AnySvelteComponent | undefined = undefined
+  export let iconProps: any | undefined = undefined
   export let justify: 'left' | 'center' = 'center'
   export let disabled: boolean = false
   export let loading: boolean = false
@@ -105,7 +106,7 @@
 >
   {#if icon && !loading}
     <div class="btn-icon pointer-events-none" class:resetIconSize>
-      <Icon bind:icon size={iconSize} />
+      <Icon bind:icon size={iconSize} {iconProps} />
     </div>
   {/if}
   {#if loading}
diff --git a/packages/ui/src/components/ColorPopup.svelte b/packages/ui/src/components/ColorPopup.svelte
index 787304c956..8f0b745862 100644
--- a/packages/ui/src/components/ColorPopup.svelte
+++ b/packages/ui/src/components/ColorPopup.svelte
@@ -18,7 +18,7 @@
   import { createEventDispatcher, onMount } from 'svelte'
   import { getPlatformColor } from '../colors'
   import ListView from './ListView.svelte'
-  import { resizeObserver } from '..'
+  import { resizeObserver, deviceOptionsStore } from '..'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined
@@ -70,7 +70,7 @@
   }
   let input: HTMLElement
   onMount(() => {
-    if (input) input.focus()
+    if (input && !$deviceOptionsStore.isMobile) input.focus()
   })
 </script>
 
diff --git a/packages/ui/src/components/DropdownLabelsPopup.svelte b/packages/ui/src/components/DropdownLabelsPopup.svelte
index faa45dba7b..7a1cd2068a 100644
--- a/packages/ui/src/components/DropdownLabelsPopup.svelte
+++ b/packages/ui/src/components/DropdownLabelsPopup.svelte
@@ -20,7 +20,7 @@
   import plugin from '../plugin'
   import CheckBox from './CheckBox.svelte'
   import ListView from './ListView.svelte'
-  import { resizeObserver } from '..'
+  import { resizeObserver, deviceOptionsStore } from '..'
 
   export let placeholder: IntlString = plugin.string.SearchDots
   export let items: DropdownTextItem[]
@@ -35,7 +35,7 @@
   let searchInput: HTMLInputElement
 
   onMount(() => {
-    if (searchInput) searchInput.focus()
+    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
   })
 
   let selection = 0
diff --git a/packages/ui/src/components/DropdownPopup.svelte b/packages/ui/src/components/DropdownPopup.svelte
index 609e4e2589..78b57dd202 100644
--- a/packages/ui/src/components/DropdownPopup.svelte
+++ b/packages/ui/src/components/DropdownPopup.svelte
@@ -20,7 +20,7 @@
   import plugin from '../plugin'
   import Icon from './Icon.svelte'
   import ListView from './ListView.svelte'
-  import { resizeObserver } from '..'
+  import { resizeObserver, deviceOptionsStore } from '..'
 
   export let icon: Asset | AnySvelteComponent
   export let placeholder: IntlString = plugin.string.SearchDots
@@ -37,7 +37,7 @@
   let searchInput: HTMLInputElement
 
   onMount(() => {
-    if (searchInput) searchInput.focus()
+    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
   })
 
   let selection = 0
diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
index 6f7ad8a12e..34a8af6e56 100644
--- a/packages/ui/src/components/SelectPopup.svelte
+++ b/packages/ui/src/components/SelectPopup.svelte
@@ -23,7 +23,7 @@
   import Label from './Label.svelte'
   import ListView from './ListView.svelte'
   import type { AnySvelteComponent } from '../types'
-  import { resizeObserver } from '../resize'
+  import { resizeObserver, deviceOptionsStore } from '..'
 
   interface ValueType {
     id: number | string | null
@@ -132,7 +132,7 @@
       <EditBox
         kind={'search-style'}
         focusIndex={1}
-        focus
+        focus={!$deviceOptionsStore.isMobile}
         bind:value={search}
         {placeholder}
         {placeholderParam}
diff --git a/packages/ui/src/components/icons/CheckAll.svelte b/packages/ui/src/components/icons/CheckAll.svelte
new file mode 100644
index 0000000000..b5988e1387
--- /dev/null
+++ b/packages/ui/src/components/icons/CheckAll.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      {fill}
+      d="M7.1,13.2c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1l-0.6-0.6c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1L7.1,13.2z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+    <path
+      {fill}
+      d="M22.5,6.5c-0.3-0.3-0.8-0.3-1.1,0L12,15.9l-0.1-0.1c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l0.6,0.6c0.3,0.3,0.8,0.3,1.1,0l10-10C22.8,7.2,22.8,6.8,22.5,6.5z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+    <path
+      {fill}
+      d="M17.5,6.5c-0.3-0.3-0.8-0.3-1.1,0L7,15.9l-4.5-4.5c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l5,5c0.3,0.3,0.8,0.3,1.1,0l10-10C17.8,7.2,17.8,6.8,17.5,6.5z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+  </g>
+</svg>
diff --git a/packages/ui/src/components/icons/Delete.svelte b/packages/ui/src/components/icons/Delete.svelte
index 9d5e819087..cd5b2cb9ce 100644
--- a/packages/ui/src/components/icons/Delete.svelte
+++ b/packages/ui/src/components/icons/Delete.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'small' | 'medium' | 'large'
-  const fill: string = 'currentColor'
+  export let fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 11dde3de88..269e7f083d 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -124,6 +124,7 @@ export { default as IconEdit } from './components/icons/Edit.svelte'
 export { default as IconInfo } from './components/icons/Info.svelte'
 export { default as IconBlueCheck } from './components/icons/BlueCheck.svelte'
 export { default as IconCheck } from './components/icons/Check.svelte'
+export { default as IconCheckAll } from './components/icons/CheckAll.svelte'
 export { default as IconArrowLeft } from './components/icons/ArrowLeft.svelte'
 export { default as IconArrowRight } from './components/icons/ArrowRight.svelte'
 export { default as IconNavPrev } from './components/icons/NavPrev.svelte'
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index e276d28dba..2b0af6ab1c 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -255,12 +255,21 @@ export function fitPopupElement (
     } else if (element === 'account') {
       newProps.bottom = '2.75rem'
       newProps.left = '5rem'
+      newProps.minWidth = newProps.maxWidth = '42rem'
+      newProps.maxHeight = 'calc(100vh - 5.5rem)'
+      show = true
     } else if (element === 'account-portrait') {
       newProps.bottom = 'calc(var(--app-panel-width) + .75rem)'
       newProps.right = '.5rem'
+      newProps.minWidth = newProps.maxWidth = 'calc(100vw - 1rem)'
+      newProps.maxHeight = 'calc(100vh - var(--app-panel-width) - 1.5rem)'
+      show = true
     } else if (element === 'account-mobile') {
       newProps.bottom = '.5rem'
       newProps.left = 'calc(var(--app-panel-width) + .5rem)'
+      newProps.minWidth = newProps.maxWidth = 'calc(100vw - var(--app-panel-width) - 1rem)'
+      newProps.maxHeight = 'calc(100vh - 1rem)'
+      show = true
     } else if (element === 'full' && contentPanel === undefined) {
       newProps.top = '0'
       newProps.bottom = '0'
diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte
index 43ac4aee0c..9445e4b801 100644
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/plugins/activity-resources/src/components/TxView.svelte
@@ -43,6 +43,7 @@
   export let showIcon: boolean = true
   export let isNew: boolean = false
   export let isNextNew: boolean = false
+  export let contentHidden: boolean = false
   // export let showDocument = false
 
   let ptx: DisplayTx | undefined
@@ -305,7 +306,7 @@
       </div>
 
       {#if viewlet && viewlet.component && viewlet.display !== 'inline'}
-        <div class="activity-content {viewlet.display}">
+        <div class="activity-content {viewlet.display}" class:contentHidden>
           <ShowMore ignore={edit}>
             {#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
               <div class="flex-row-center flex-grow flex-wrap clear-mins">
@@ -456,4 +457,21 @@
   .lower {
     text-transform: lowercase;
   }
+  .activity-content {
+    overflow: hidden;
+    visibility: visible;
+    max-height: max-content;
+    opacity: 1;
+    transition-property: max-height, opacity;
+    transition-timing-function: ease-in-out;
+    transition-duration: 0.15s;
+
+    &.contentHidden {
+      visibility: hidden;
+      padding: 0;
+      margin-top: -0.5rem;
+      max-height: 0;
+      opacity: 0;
+    }
+  }
 </style>
diff --git a/plugins/chunter-resources/src/components/CommentPresenter.svelte b/plugins/chunter-resources/src/components/CommentPresenter.svelte
index b4b55f6ade..9ca7100a71 100644
--- a/plugins/chunter-resources/src/components/CommentPresenter.svelte
+++ b/plugins/chunter-resources/src/components/CommentPresenter.svelte
@@ -16,35 +16,52 @@
 <script lang="ts">
   import { AttachmentDocList } from '@hcengineering/attachment-resources'
   import type { Comment } from '@hcengineering/chunter'
+  import chunter from '@hcengineering/chunter'
   import { formatName } from '@hcengineering/contact'
   import { Avatar, getClient, MessageViewer } from '@hcengineering/presentation'
-  import { TimeSince, ShowMore } from '@hcengineering/ui'
+  import { TimeSince, ShowMore, Icon } from '@hcengineering/ui'
   import { getUser } from '../utils'
 
   export let value: Comment
+  export let inline: boolean = false
+  export let disableClick = false
 
   const client = getClient()
+
+  const cutId = (str: string): string => {
+    return str.slice(0, 4) + '...' + str.slice(-4)
+  }
 </script>
 
-<div class="flex-row-top">
-  <div class="avatar">
-    <Avatar size={'medium'} />
-  </div>
-  <div class="flex-grow flex-col">
-    <div class="header">
-      <div class="fs-title">
-        {#await getUser(client, value.modifiedBy) then user}
-          {#if user}{formatName(user.name)}{/if}
-        {/await}
-      </div>
-      <div class="content-trans-color ml-4"><TimeSince value={value.modifiedOn} /></div>
+{#if inline}
+  <a class="flex-presenter inline-presenter" href="#{disableClick ? null : ''}">
+    <div class="icon">
+      <Icon icon={chunter.icon.Thread} size={'small'} />
+    </div>
+    <span class="label nowrap">Message</span>
+  </a>
+  &nbsp;<span class="content-dark-color">#{cutId(value._id.toString())}</span>
+{:else}
+  <div class="flex-row-top">
+    <div class="avatar">
+      <Avatar size={'medium'} />
+    </div>
+    <div class="flex-grow flex-col">
+      <div class="header">
+        <div class="fs-title">
+          {#await getUser(client, value.modifiedBy) then user}
+            {#if user}{formatName(user.name)}{/if}
+          {/await}
+        </div>
+        <div class="content-trans-color ml-4"><TimeSince value={value.modifiedOn} /></div>
+      </div>
+      <ShowMore limit={126} fixed>
+        <MessageViewer message={value.message} />
+        <AttachmentDocList {value} />
+      </ShowMore>
     </div>
-    <ShowMore limit={126} fixed>
-      <MessageViewer message={value.message} />
-      <AttachmentDocList {value} />
-    </ShowMore>
   </div>
-</div>
+{/if}
 
 <style lang="scss">
   .avatar {
diff --git a/plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte b/plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte
index 8e4e571624..158d4ef75c 100644
--- a/plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte
+++ b/plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte
@@ -62,7 +62,7 @@
       <svelte:component this={targetPresenter.presenter} value={target} />
     </div>
   {/if}
-  <span class="lower"><Label label={chunter.string.In} /></span>
+  <span style:text-transform={'lowercase'}><Label label={chunter.string.In} /></span>
   <div class="ml-2">
     <svelte:component this={presenter.presenter} value={doc} />
   </div>
diff --git a/plugins/contact-resources/src/components/EmployeePreviewPopup.svelte b/plugins/contact-resources/src/components/EmployeePreviewPopup.svelte
index 6c8e830a2b..ee2695f89f 100644
--- a/plugins/contact-resources/src/components/EmployeePreviewPopup.svelte
+++ b/plugins/contact-resources/src/components/EmployeePreviewPopup.svelte
@@ -2,7 +2,7 @@
   import { Employee, EmployeeAccount, formatName, Status } from '@hcengineering/contact'
   import { getCurrentAccount, Ref, Hierarchy, WithLookup } from '@hcengineering/core'
   import { Avatar, createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, getPanelURI, Label, showPopup } from '@hcengineering/ui'
+  import { Button, getPanelURI, Label, showPopup, resizeObserver } from '@hcengineering/ui'
   import EmployeeSetStatusPopup from './EmployeeSetStatusPopup.svelte'
   import contact from '../plugin'
   import EmployeeStatusPresenter from './EmployeeStatusPresenter.svelte'
@@ -55,7 +55,12 @@
   }
 </script>
 
-<div class="antiPopup p-4 flex-col">
+<div
+  class="antiPopup p-4 flex-col"
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
   {#if employee}
     <div class="flex-col-center pb-2">
       <Avatar size="x-large" avatar={employee?.avatar} />
diff --git a/plugins/notification-resources/package.json b/plugins/notification-resources/package.json
index 419699733a..57e3fcf045 100644
--- a/plugins/notification-resources/package.json
+++ b/plugins/notification-resources/package.json
@@ -40,6 +40,7 @@
     "@hcengineering/activity": "^0.6.0",
     "@hcengineering/contact": "^0.6.9",
     "@hcengineering/core": "^0.6.20",
-    "@hcengineering/view": "^0.6.2"
+    "@hcengineering/view": "^0.6.2",
+    "@hcengineering/view-resources": "^0.6.0"
   }
 }
diff --git a/plugins/notification-resources/src/components/NotificationView.svelte b/plugins/notification-resources/src/components/NotificationView.svelte
index 07de538080..03757c35c7 100644
--- a/plugins/notification-resources/src/components/NotificationView.svelte
+++ b/plugins/notification-resources/src/components/NotificationView.svelte
@@ -16,11 +16,13 @@
 <script lang="ts">
   import { TxViewlet } from '@hcengineering/activity'
   import { ActivityKey, DisplayTx, newDisplayTx, TxView } from '@hcengineering/activity-resources'
-  import core, { Doc, TxCUD, TxProcessor, WithLookup } from '@hcengineering/core'
+  import core, { Doc, TxCUD, TxProcessor, WithLookup, Ref, Class } from '@hcengineering/core'
   import { Notification, NotificationStatus } from '@hcengineering/notification'
   import { getClient } from '@hcengineering/presentation'
-  import { ActionIcon, Component, getPlatformColor, IconBack, IconCheck, IconDelete } from '@hcengineering/ui'
+  import { Button, Component, getPlatformColor, IconBack, IconCheck, IconDelete } from '@hcengineering/ui'
+  import type { AnyComponent } from '@hcengineering/ui'
   import view from '@hcengineering/view'
+  import { getObjectPreview } from '@hcengineering/view-resources'
   import plugin from '../plugin'
 
   export let notification: WithLookup<Notification>
@@ -46,72 +48,168 @@
   }
 
   $: displayTx = getDisplayTx(notification)
+
+  let presenter: AnyComponent | undefined
+  let doc: Doc | undefined
+  let visible: boolean = false
+  async function updatePreviewPresenter (ref?: Ref<Class<Doc>>): Promise<void> {
+    presenter = ref !== undefined ? await getObjectPreview(client, ref) : undefined
+  }
+  $: if (displayTx) updatePreviewPresenter(displayTx.tx.objectClass)
+  $: if (presenter !== undefined && displayTx) {
+    client.findOne(displayTx.tx.objectClass, { _id: displayTx.tx.objectId }).then((res) => (doc = res))
+  }
 </script>
 
 {#if displayTx}
   {@const isNew = notification.status !== NotificationStatus.Read}
-  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
-  <div class="content">
-    <div class="flex-row">
-      <div class="bottom-divider mb-2">
-        <div class="flex-row-center mb-2 mt-2">
-          <div class="notify mr-4" style:color={isNew ? getPlatformColor(11) : '#555555'} />
-          <div
-            class="flex-shrink"
-            on:click={() => {
-              changeState(notification, NotificationStatus.Read)
-            }}
-          >
-            <Component
-              is={view.component.ObjectPresenter}
-              props={{
-                objectId: displayTx.tx.objectId,
-                _class: displayTx.tx.objectClass,
-                value: displayTx.doc,
-                inline: true
-              }}
-            />
-          </div>
-          <div class="flex flex-reverse flex-gap-3 flex-grow">
-            <ActionIcon
-              icon={IconDelete}
-              label={plugin.string.Remove}
-              size={'medium'}
-              action={() => {
-                client.remove(notification)
-              }}
-            />
-            <ActionIcon
-              icon={isNew ? IconCheck : IconBack}
-              iconProps={!isNew ? { kind: 'curve' } : {}}
-              label={plugin.string.MarkAsRead}
-              size={'medium'}
-              action={() => {
-                changeState(notification, isNew ? NotificationStatus.Read : NotificationStatus.Notified)
-              }}
-            />
-          </div>
-        </div>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="content {isNew ? 'new' : 'readed'} with-document"
+    class:visible
+    style:--color={isNew ? getPlatformColor(11) : '#555555'}
+    on:click|preventDefault|stopPropagation={() => {
+      changeState(notification, NotificationStatus.Read)
+      visible = !visible
+    }}
+  >
+    <div class="subheader">
+      <div class="flex-grow">
+        <Component
+          is={view.component.ObjectPresenter}
+          props={{
+            objectId: displayTx.tx.objectId,
+            _class: displayTx.tx.objectClass,
+            value: displayTx.doc,
+            inline: true
+          }}
+        />
+      </div>
+      <div class="buttons-group xsmall-gap">
+        <Button
+          icon={isNew ? IconCheck : IconBack}
+          iconProps={!isNew ? { kind: 'curve' } : {}}
+          kind={'transparent'}
+          showTooltip={{ label: plugin.string.MarkAsRead }}
+          size={'medium'}
+          on:click={() => {
+            if (!isNew && visible) visible = false
+            changeState(notification, isNew ? NotificationStatus.Read : NotificationStatus.Notified)
+          }}
+        />
+        <Button
+          icon={IconDelete}
+          kind={'transparent'}
+          showTooltip={{ label: plugin.string.Remove }}
+          size={'medium'}
+          on:click={() => {
+            client.remove(notification)
+          }}
+        />
       </div>
-      <TxView tx={displayTx} {viewlets} showIcon={false} />
     </div>
+    <TxView tx={displayTx} {viewlets} showIcon={false} contentHidden={!visible} />
+    {#if presenter && doc}
+      <div class="document-preview">
+        <Component is={presenter} props={{ object: doc }} />
+      </div>
+    {/if}
   </div>
 {/if}
 
 <style lang="scss">
   .content {
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-    border: 1px solid transparent;
-  }
-  .notify {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: 0.25rem;
-    outline: 1px solid transparent;
-    outline-offset: 2px;
-    transition: all 0.1s ease-in-out;
-    z-index: -1;
-    background-color: currentColor;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0.75rem 0.75rem;
+    min-height: 0;
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.75rem;
+    transition-property: border-color, background-color, height;
+    transition-duration: 0.3s, 0.15s, 0.15s;
+    transition-timing-function: ease-in-out;
+
+    &:not(:last-child) {
+      margin-bottom: 0.75rem;
+    }
+    &.new {
+      background-color: var(--popup-bg-hover);
+    }
+    &.readed {
+      background-color: var(--body-accent);
+    }
+    &:hover {
+      border-color: var(--button-border-hover);
+    }
+    &.with-document {
+      cursor: pointer;
+
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: -0.25rem;
+        left: 1rem;
+        right: 1rem;
+        width: calc(100% - 2rem);
+        height: 0.75rem;
+        background-color: var(--body-accent);
+        border: 1px solid var(--divider-color);
+        border-radius: 0.5rem;
+        z-index: -1;
+        transition: bottom 0.15s ease-in-out;
+        box-shadow: var(--primary-shadow);
+      }
+      &:hover::before {
+        bottom: -0.4rem;
+      }
+      &.visible::before {
+        bottom: 0.25rem;
+      }
+    }
+
+    .subheader {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 0 0.5rem 1.75rem;
+      margin-bottom: 0.5rem;
+      min-height: 0;
+      border-bottom: 1px solid var(--divider-color);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0.5rem;
+        width: 0.5rem;
+        height: 0.5rem;
+        background-color: var(--color);
+        transform: translateY(calc(-50% - 0.25rem));
+        border-radius: 50%;
+      }
+    }
+    .document-preview {
+      overflow: hidden;
+      visibility: hidden;
+      margin-top: -0.5rem;
+      padding: 0;
+      max-height: 0;
+      background-color: var(--body-color);
+      border: 1px solid var(--divider-color);
+      border-radius: 0.5rem;
+      opacity: 0;
+      transition-property: margin-top, max-height, opacity;
+      transition-timing-function: ease-in-out;
+      transition-duration: 0.15s;
+    }
+    &.visible .document-preview {
+      visibility: visible;
+      margin-top: 0.5rem;
+      padding: 0.75rem 1rem;
+      max-height: max-content;
+      opacity: 1;
+    }
   }
 </style>
diff --git a/plugins/notification-resources/src/components/NotificationsPopup.svelte b/plugins/notification-resources/src/components/NotificationsPopup.svelte
index 5bc397a8ce..3822c8b77c 100644
--- a/plugins/notification-resources/src/components/NotificationsPopup.svelte
+++ b/plugins/notification-resources/src/components/NotificationsPopup.svelte
@@ -20,7 +20,7 @@
   import core, { getCurrentAccount, WithLookup } from '@hcengineering/core'
   import { Notification, NotificationStatus } from '@hcengineering/notification'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { ActionIcon, IconCheck, IconDelete, Scroller } from '@hcengineering/ui'
+  import { Button, IconCheckAll, IconDelete, Scroller } from '@hcengineering/ui'
   import Label from '@hcengineering/ui/src/components/Label.svelte'
   import notification from '../plugin'
   import NotificationView from './NotificationView.svelte'
@@ -80,29 +80,32 @@
 <div class="notifyPopup" class:justify-center={notifications.length === 0}>
   <div class="header flex-between">
     <span class="fs-title overflow-label"><Label label={notification.string.Notifications} /></span>
-    <div class="flex flex-gap-2">
-      <ActionIcon
-        icon={IconCheck}
-        label={notification.string.MarkAllAsRead}
-        size={'medium'}
-        action={markAsReadNotifications}
-      />
-      <ActionIcon
-        icon={IconDelete}
-        label={notification.string.RemoveAll}
-        size={'medium'}
-        action={deleteNotifications}
-      />
-    </div>
+    {#if notifications.length > 0}
+      <div class="buttons-group xxsmall-gap">
+        <Button
+          icon={IconCheckAll}
+          kind={'list'}
+          showTooltip={{ label: notification.string.MarkAllAsRead }}
+          size={'medium'}
+          on:click={markAsReadNotifications}
+        />
+        <Button
+          icon={IconDelete}
+          kind={'list'}
+          showTooltip={{ label: notification.string.RemoveAll }}
+          size={'medium'}
+          on:click={deleteNotifications}
+        />
+      </div>
+    {/if}
   </div>
   {#if notifications.length > 0}
-    <Scroller>
-      <div class="px-2 clear-mins">
-        {#each notifications as n}
-          <NotificationView notification={n} {viewlets} />
-        {/each}
-      </div>
+    <Scroller padding={'0 .5rem'}>
+      {#each notifications as n}
+        <NotificationView notification={n} {viewlets} />
+      {/each}
     </Scroller>
+    <div class="space x3" />
   {:else}
     <div class="flex-grow flex-center">
       <Label label={notification.string.NoNotifications} />
diff --git a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte b/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
index d19276840b..3e87f88774 100644
--- a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
+++ b/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
@@ -73,8 +73,6 @@
   async function removeTag (id: Ref<TagReference>): Promise<void> {
     dispatch('delete', id)
   }
-  $: console.log('[!!!] items: ', items)
-  $: console.log('[!!!] items - count: ', items.length)
 </script>
 
 <Button
diff --git a/plugins/tags-resources/src/components/TagsFilter.svelte b/plugins/tags-resources/src/components/TagsFilter.svelte
index 001073c92e..cd876a357a 100644
--- a/plugins/tags-resources/src/components/TagsFilter.svelte
+++ b/plugins/tags-resources/src/components/TagsFilter.svelte
@@ -25,7 +25,8 @@
     Label,
     Loading,
     resizeObserver,
-    showPopup
+    showPopup,
+    deviceOptionsStore
   } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { FilterQuery } from '@hcengineering/view-resources'
@@ -80,7 +81,7 @@
   })
 
   onMount(() => {
-    if (searchInput) searchInput.focus()
+    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
   })
 
   const toggleGroup = (ev: MouseEvent): void => {
diff --git a/plugins/tags-resources/src/components/TagsPopup.svelte b/plugins/tags-resources/src/components/TagsPopup.svelte
index 13b750d862..0e20a7c831 100644
--- a/plugins/tags-resources/src/components/TagsPopup.svelte
+++ b/plugins/tags-resources/src/components/TagsPopup.svelte
@@ -27,7 +27,8 @@
     IconClose,
     Label,
     showPopup,
-    resizeObserver
+    resizeObserver,
+    deviceOptionsStore
   } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import tags from '../plugin'
@@ -98,7 +99,7 @@
     return ''
   }
   onMount(() => {
-    if (searchElement) searchElement.focus()
+    if (searchElement && !$deviceOptionsStore.isMobile) searchElement.focus()
   })
   const tagSort = (a: TagElement, b: TagElement) => {
     const r = (b.refCount ?? 0) - (a.refCount ?? 0)
diff --git a/plugins/templates-resources/src/components/TemplatePopup.svelte b/plugins/templates-resources/src/components/TemplatePopup.svelte
index dc8ee3ff79..48cd32c5ca 100644
--- a/plugins/templates-resources/src/components/TemplatePopup.svelte
+++ b/plugins/templates-resources/src/components/TemplatePopup.svelte
@@ -17,7 +17,7 @@
   import { createQuery } from '@hcengineering/presentation'
   import { MessageTemplate } from '@hcengineering/templates'
   import { TextEditorHandler } from '@hcengineering/text-editor'
-  import { closePopup, EditWithIcon, IconSearch, Label } from '@hcengineering/ui'
+  import { closePopup, EditWithIcon, IconSearch, Label, deviceOptionsStore } from '@hcengineering/ui'
   import templates from '../plugin'
 
   export let editor: TextEditorHandler
@@ -67,7 +67,12 @@
 <svelte:window on:keydown={onKeyDown} />
 <div class="antiPopup template-popup">
   <div class="mt-4 mb-4">
-    <EditWithIcon icon={IconSearch} bind:value={query} placeholder={templates.string.SearchTemplate} />
+    <EditWithIcon
+      icon={IconSearch}
+      bind:value={query}
+      placeholder={templates.string.SearchTemplate}
+      focus={!$deviceOptionsStore.isMobile}
+    />
   </div>
   <Label label={templates.string.Suggested} />
   <div class="scroll mt-2">
diff --git a/plugins/tracker-resources/src/components/SpacesPopup.svelte b/plugins/tracker-resources/src/components/SpacesPopup.svelte
index 5260df1a64..0bcd3a57c2 100644
--- a/plugins/tracker-resources/src/components/SpacesPopup.svelte
+++ b/plugins/tracker-resources/src/components/SpacesPopup.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { afterUpdate, createEventDispatcher } from 'svelte'
 
-  import ui, { Label, EditWithIcon, IconSearch } from '@hcengineering/ui'
+  import ui, { Label, EditWithIcon, IconSearch, deviceOptionsStore } from '@hcengineering/ui'
   import SpaceInfo from './SpaceInfo.svelte'
 
   import type { Ref, Class, Space, DocumentQuery } from '@hcengineering/core'
@@ -40,7 +40,12 @@
 <div class="antiPopup antiPopup-withHeader">
   <div class="ap-space" />
   <div class="ap-header">
-    <EditWithIcon icon={IconSearch} bind:value={search} placeholder={ui.string.SearchDots} focus />
+    <EditWithIcon
+      icon={IconSearch}
+      bind:value={search}
+      placeholder={ui.string.SearchDots}
+      focus={!$deviceOptionsStore.isMobile}
+    />
     <div class="ap-caption"><Label label={ui.string.Suggested} /></div>
   </div>
   <div class="ap-space" />
diff --git a/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte b/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
index bd26bd6f14..b175c950d9 100644
--- a/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
+++ b/plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
@@ -62,7 +62,7 @@
 
   const space = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
   const showCreateDialog = async () => {
-    showPopup(NewProject, { space, targetElement: null }, null)
+    showPopup(NewProject, { space, targetElement: null }, 'top')
   }
 
   const handleViewModeChanged = (newMode: ProjectsViewMode) => {
diff --git a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
index 53424ae081..2fc86aaf13 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
@@ -67,7 +67,7 @@
 
   const space = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
   const showCreateDialog = async () => {
-    showPopup(NewSprint, { space, targetElement: null }, null)
+    showPopup(NewSprint, { space, targetElement: null }, 'top')
   }
 
   const handleViewModeChanged = (newMode: SprintViewMode) => {
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
index 524039d137..b407031f93 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
@@ -67,7 +67,7 @@
   $: if (docWidth > 900 && docSize) docSize = false
 
   const showCreateDialog = async () => {
-    showPopup(CreateIssueTemplate, { targetElement: null }, null)
+    showPopup(CreateIssueTemplate, { targetElement: null }, 'top')
   }
 </script>
 
diff --git a/plugins/view-resources/src/components/filter/ObjectFilter.svelte b/plugins/view-resources/src/components/filter/ObjectFilter.svelte
index c834247530..eb41fdb451 100644
--- a/plugins/view-resources/src/components/filter/ObjectFilter.svelte
+++ b/plugins/view-resources/src/components/filter/ObjectFilter.svelte
@@ -18,7 +18,7 @@
   import presentation, { getClient } from '@hcengineering/presentation'
   import type { State } from '@hcengineering/task'
   import task from '@hcengineering/task'
-  import ui, { Button, CheckBox, Label, Loading, resizeObserver } from '@hcengineering/ui'
+  import ui, { Button, CheckBox, Label, Loading, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { createEventDispatcher, onMount } from 'svelte'
   import view from '../../plugin'
@@ -127,7 +127,7 @@
   })
 
   onMount(() => {
-    if (searchInput) searchInput.focus()
+    if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
   })
 
   const dispatch = createEventDispatcher()
diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts
index 5c921e383b..e213a84158 100644
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@@ -91,6 +91,7 @@ export {
   buildModel,
   getCollectionCounter,
   getObjectPresenter,
+  getObjectPreview,
   LoadingProps,
   setActiveViewletId,
   getActiveViewletId,