Inbox as popup (#2957)

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

plugins/board-resources/src/components/add-card/AddCard.svelte

@@ -71,21 +71,21 @@
     return new Promise<'single' | 'multiple' | 'close'>((resolve) => {
       const popupOpts = {
         onAddSingle: () => {
-          closePopup()
+          popup.close()
           resolve('single')
         },
         onAddMultiple: () => {
-          closePopup()
+          popup.close()
           resolve('multiple')
         },
         onClose: () => {
-          closePopup()
+          popup.close()
           resolve('close')
         },
         cardsNumber: splittedTitle.length
       }
 
-      const closePopup = showPopup(AddMultipleCardsPopup, popupOpts, anchorRef, () => resolve('close'))
+      const popup = showPopup(AddMultipleCardsPopup, popupOpts, anchorRef, () => resolve('close'))
     }).then((value) => {
       if (value === 'single' || value === 'close') {
         return addCard(title.replace('\n', ' ')).then((res) => {

plugins/notification-resources/src/components/Inbox.svelte

@@ -96,10 +96,12 @@
       </div>
     </div>
   {/if}
-  {#if loading}
-    <Loading />
-  {:else if component && _id && _class}
+  {#if component && _id && _class}
     <Component is={component} props={{ embedded: true, _id, _class }} />
+  {:else}
+    <div class="antiPanel-component filled w-full">
+      <Loading />
+    </div>
   {/if}
 </div>
 

plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte

@@ -83,6 +83,10 @@
       _class,
       { _id },
       async (result) => {
+        if (saveTrigger !== undefined) {
+          clearTimeout(saveTrigger)
+          await save()
+        }
         ;[issue] = result
         title = issue.title
         description = issue.description
@@ -177,7 +181,7 @@
     {/if}
     <EditBox bind:value={title} placeholder={tracker.string.IssueTitlePlaceholder} kind="large-style" on:blur={save} />
     <div class="w-full mt-6">
-      {#key _id}
+      {#key issue._id}
         <AttachmentStyledBox
           bind:this={descriptionBox}
           useAttachmentPreview={true}

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

@@ -47,7 +47,6 @@
   }
 
   let selectedId: Ref<FilteredView> | undefined = undefined
-  let selectedFW: FilteredView[] | undefined = undefined
   async function load (fv: FilteredView): Promise<void> {
     if (fv.viewletId !== undefined && fv.viewletId !== null) {
       const viewlet = await client.findOne(view.class.Viewlet, { _id: fv.viewletId })
@@ -66,7 +65,7 @@
   }
 
   const clearSelection = () => {
-    selectedId = selectedFW = undefined
+    selectedId = undefined
     dispatch('select', false)
   }
 

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

@@ -24,6 +24,7 @@
   import request, { RequestStatus } from '@hcengineering/request'
   import {
     AnyComponent,
+    CompAndProps,
     Component,
     DatePickerPopup,
     Label,
@@ -33,6 +34,7 @@
     Popup,
     PopupAlignment,
     PopupPosAlignment,
+    PopupResult,
     ResolvedLocation,
     TooltipInstance,
     areLocationsEqual,
@@ -43,6 +45,7 @@
     location,
     navigate,
     openPanel,
+    popupstore,
     resizeObserver,
     showPopup
   } from '@hcengineering/ui'
@@ -500,7 +503,18 @@
     }
   }
 
-  let prevLoc: Location | undefined = undefined
+  function checkInbox (popups: CompAndProps[]) {
+    if (inboxPopup !== undefined) {
+      const exists = popups.find((p) => p.id === inboxPopup?.id)
+      if (!exists) {
+        inboxPopup = undefined
+      }
+    }
+  }
+
+  $: checkInbox($popupstore)
+
+  let inboxPopup: PopupResult | undefined = undefined
 </script>
 
 {#if employee?.active === true}
@@ -568,17 +582,26 @@
           <AppItem
             icon={notification.icon.Notifications}
             label={notification.string.Inbox}
-            selected={currentAppAlias === notificationId}
+            selected={currentAppAlias === notificationId || inboxPopup !== undefined}
             on:click={(e) => {
-              if (currentAppAlias === notificationId) {
-                e.preventDefault()
-                e.stopPropagation()
-                if (prevLoc !== undefined) {
-                  navigate(prevLoc)
-                }
+              if (e.metaKey || e.ctrlKey) return
+              if (inboxPopup) {
+                inboxPopup.close()
               } else {
-                prevLoc = $location
+                inboxPopup = showPopup(
+                  notification.component.Inbox,
+                  { visibileNav: true },
+                  'content',
+                  undefined,
+                  undefined,
+                  {
+                    category: 'popup',
+                    overlay: false
+                  }
+                )
               }
+              e.preventDefault()
+              e.stopPropagation()
             }}
             notify={hasNotification}
           />
@@ -672,7 +695,7 @@
       <ActionContext context={{ mode: 'panel' }} />
     </svelte:fragment>
   </PanelInstance>
-  <Popup>
+  <Popup {contentPanel}>
     <svelte:fragment slot="popup-header">
       <ActionContext context={{ mode: 'popup' }} />
     </svelte:fragment>