From 1c01925ed48570656a703be462f0be4f1a686770 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Fri, 13 Jan 2023 06:10:29 +0300
Subject: [PATCH] Update Requests layout, fix UI (#2503)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/text-editor/lang/en.json             |  5 ++
 packages/text-editor/lang/ru.json             |  5 ++
 .../src/components/CollaboratorEditor.svelte  |  6 +-
 .../src/components/ReferenceInput.svelte      | 70 +++++++++++++------
 packages/text-editor/src/plugin.ts            |  1 +
 packages/text-editor/src/types.ts             | 10 +++
 packages/theme/styles/_layouts.scss           |  1 +
 packages/ui/src/components/Scroller.svelte    |  2 +
 packages/ui/src/components/ShowMore.svelte    |  7 +-
 .../src/components/AttachmentRefInput.svelte  | 10 ++-
 .../src/components/NotificationView.svelte    |  4 +-
 .../src/components/NotificationsPopup.svelte  |  1 -
 plugins/request-assets/lang/en.json           |  3 +-
 plugins/request-assets/lang/ru.json           |  3 +-
 plugins/request-resources/package.json        |  3 +-
 .../src/components/RequestActions.svelte      | 35 +++++++---
 .../src/components/RequestView.svelte         | 10 ++-
 .../src/components/RequestsPopup.svelte       | 14 ++--
 .../src/components/icons/Comments.svelte      | 38 ++++++++++
 .../src/components/icons/DocFail.svelte       | 43 ++++++++++++
 .../src/components/icons/DocSuccess.svelte    | 43 ++++++++++++
 plugins/request-resources/src/plugin.ts       |  3 +-
 22 files changed, 264 insertions(+), 53 deletions(-)
 create mode 100644 plugins/request-resources/src/components/icons/Comments.svelte
 create mode 100644 plugins/request-resources/src/components/icons/DocFail.svelte
 create mode 100644 plugins/request-resources/src/components/icons/DocSuccess.svelte

diff --git a/packages/text-editor/lang/en.json b/packages/text-editor/lang/en.json
index a002b62751..486c00cba2 100644
--- a/packages/text-editor/lang/en.json
+++ b/packages/text-editor/lang/en.json
@@ -15,6 +15,11 @@
     "Code": "Code",
     "CodeBlock": "Code block",
     "GettingWorkDone": "Getting work done",
+    "Send": "Send",
+    "Attach": "Attach",
+    "TextStyle": "Text style",
+    "Emoji": "Emoji",
+    "GIF": "GIF",
     "Smileys": "Smileys",
     "Nature": "Nature",
     "Symbols": "Symbols",
diff --git a/packages/text-editor/lang/ru.json b/packages/text-editor/lang/ru.json
index 6cb42e125f..3c1d0cac8e 100644
--- a/packages/text-editor/lang/ru.json
+++ b/packages/text-editor/lang/ru.json
@@ -15,6 +15,11 @@
     "Code": "Код",
     "CodeBlock": "Кодовый блок",
     "GettingWorkDone": "Для работы",
+    "Send": "Отправить",
+    "Attach": "Прикреплять",
+    "TextStyle": "Стиль текста",
+    "Emoji": "Эмодзи",
+    "GIF": "GIF",
     "Smileys": "Смайлики",
     "Nature": "Природа",
     "Symbols": "Символы",
diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index ca447e4329..e37f33d773 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -468,7 +468,7 @@
 
 <div class="ref-container" class:autoOverflow>
   {#if isFormatting && !readonly}
-    <div class="formatPanel flex-between clear-mins" class:focused>
+    <div class="formatPanelRef formatPanel flex-between clear-mins" class:focused>
       <div class="flex-row-center buttons-group xsmall-gap">
         <StyleButton
           icon={Header}
@@ -580,13 +580,13 @@
           <slot name="tools" />
         </div>
       {:else}
-        <div class="formatPanel buttons-group xsmall-gap">
+        <div class="formatPanelRef formatPanel buttons-group xsmall-gap">
           <slot name="tools" />
         </div>
       {/if}
     </div>
   {:else if comparedVersion !== undefined}
-    <div class="formatPanel flex flex-grow flex-reverse">
+    <div class="formatPanelRef formatPanel flex flex-grow flex-reverse">
       <StyleButton
         icon={Objects}
         size={buttonSize}
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index 29e11018ef..af2e9dc94b 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -13,14 +13,15 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Asset, getResource, IntlString } from '@hcengineering/platform'
+  import { getResource, IntlString, Asset } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
-  import { AnySvelteComponent, Button, Icon, showPopup } from '@hcengineering/ui'
+  import { Button, Icon, showPopup, tooltip } from '@hcengineering/ui'
+  import type { AnySvelteComponent } from '@hcengineering/ui'
   import { AnyExtension } from '@tiptap/core'
   import { createEventDispatcher } from 'svelte'
   import { Completion } from '../Completion'
   import textEditorPlugin from '../plugin'
-  import { FormatMode, FORMAT_MODES, RefInputAction, RefInputActionItem, TextEditorHandler } from '../types'
+  import { FormatMode, FORMAT_MODES, RefAction, RefInputActionItem, TextEditorHandler } from '../types'
   import EmojiPopup from './EmojiPopup.svelte'
   import Attach from './icons/Attach.svelte'
   import Bold from './icons/Bold.svelte'
@@ -44,9 +45,12 @@
   const dispatch = createEventDispatcher()
   export let content: string = ''
   export let showSend = true
+  export let iconSend: Asset | AnySvelteComponent | undefined = undefined
+  export let labelSend: IntlString | undefined = undefined
   export let haveAttachment = false
   export let withoutTopBorder = false
   export let placeholder: IntlString | undefined = undefined
+  export let extraActions: RefAction[] | undefined = undefined
   const client = getClient()
 
   let textEditor: TextEditor
@@ -60,12 +64,6 @@
   function setContent (content: string) {
     textEditor?.setContent(content)
   }
-  interface RefAction {
-    label: IntlString
-    icon: Asset | AnySvelteComponent
-    action: RefInputAction
-    order: number
-  }
   const defActions: RefAction[] = [
     {
       label: textEditorPlugin.string.Attach,
@@ -200,7 +198,7 @@
 
 <div class="ref-container">
   {#if isFormatting}
-    <div class="formatPanel buttons-group xsmall-gap" class:withoutTopBorder>
+    <div class="formatPanelRef buttons-group xsmall-gap" class:withoutTopBorder>
       <Button
         icon={Bold}
         kind={'transparent'}
@@ -297,18 +295,40 @@
       />
     </div>
     {#if showSend}
-      <button class="sendButton" on:click={submit} disabled={isEmpty && !haveAttachment}>
-        <div class="icon"><Send size={'medium'} /></div>
+      <button
+        class="sendButton"
+        on:click={submit}
+        use:tooltip={{ label: labelSend ?? textEditorPlugin.string.Send }}
+        disabled={isEmpty && !haveAttachment}
+      >
+        <div class="icon"><Icon icon={iconSend ?? Send} size={'medium'} /></div>
       </button>
     {/if}
   </div>
-  <div class="buttons-group large-gap ml-4 mt-2">
-    {#each actions as a}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div class="icon-button" on:click={(evt) => handleAction(a, evt)}>
-        <Icon icon={a.icon} size={'medium'} />
+  <div class="flex-between clear-mins" style:margin={'.5rem 1rem 0'}>
+    <div class="buttons-group large-gap">
+      {#each actions as a}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div class="icon-button" use:tooltip={{ label: a.label }} on:click={(evt) => handleAction(a, evt)}>
+          <Icon icon={a.icon} size={'medium'} fill={a.fill} />
+        </div>
+      {/each}
+    </div>
+    {#if extraActions && extraActions.length > 0}
+      <div class="buttons-group large-gap">
+        {#each extraActions as a}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <div
+            class="icon-button"
+            class:disabled={a.disabled}
+            use:tooltip={{ label: a.label }}
+            on:click={(evt) => handleAction(a, evt)}
+          >
+            <Icon icon={a.icon} size={'medium'} fill={a.fill} />
+          </div>
+        {/each}
       </div>
-    {/each}
+    {/if}
   </div>
 </div>
 
@@ -319,11 +339,19 @@
     align-items: center;
     width: 1rem;
     height: 1rem;
-    color: var(--dark-color);
+    color: var(--caption-color);
+    opacity: 0.6;
     cursor: pointer;
 
     &:hover {
-      color: var(--accent-color);
+      opacity: 1;
+    }
+    &.disabled {
+      opacity: 0.3;
+      &:hover {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
     }
   }
   .ref-container {
@@ -331,7 +359,7 @@
     flex-direction: column;
     min-height: 4.5rem;
 
-    .formatPanel {
+    .formatPanelRef {
       padding: 0.5rem;
       background-color: var(--body-accent);
       border: 1px solid var(--divider-color);
diff --git a/packages/text-editor/src/plugin.ts b/packages/text-editor/src/plugin.ts
index 52eac4fb69..8870b56982 100644
--- a/packages/text-editor/src/plugin.ts
+++ b/packages/text-editor/src/plugin.ts
@@ -47,6 +47,7 @@ export default plugin(textEditorId, {
     Code: '' as IntlString,
     CodeBlock: '' as IntlString,
     GettingWorkDone: '' as IntlString,
+    Send: '' as IntlString,
     Smileys: '' as IntlString,
     Nature: '' as IntlString,
     Symbols: '' as IntlString,
diff --git a/packages/text-editor/src/types.ts b/packages/text-editor/src/types.ts
index 0d48535a76..a7887ce8c6 100644
--- a/packages/text-editor/src/types.ts
+++ b/packages/text-editor/src/types.ts
@@ -1,5 +1,6 @@
 import { Asset, IntlString, Resource } from '@hcengineering/platform'
 import { Doc } from '@hcengineering/core'
+import type { AnySvelteComponent } from '@hcengineering/ui'
 
 /**
  * @public
@@ -54,3 +55,12 @@ export const CollaborationIds = {
   Doc: 'text-editor.collaborator.document',
   Provider: 'text-editor.collaborator.provider'
 }
+
+export interface RefAction {
+  label: IntlString
+  icon: Asset | AnySvelteComponent
+  action: RefInputAction
+  order: number
+  fill?: string
+  disabled?: boolean
+}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 60b9ac864f..fb202b6e21 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -430,6 +430,7 @@ input.search {
 .mx-1 { margin: 0 .25rem; }
 .mx-2 { margin: 0 .5rem; }
 .mx-3 { margin: 0 .75rem; }
+.mx-4 { margin: 0 1rem; }
 .mx-10 { margin: 0 2.5rem; }
 .mx-auto { margin: 0 auto; }
 .my-2 { margin: .5rem 0; }
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index a39db563fe..b82e94afcc 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -388,6 +388,7 @@
     display: flex;
     flex-direction: column;
     flex-shrink: 1;
+    flex-grow: 1;
     height: 100%;
     min-width: 0;
     min-height: 0;
@@ -414,6 +415,7 @@
     }
   }
   .horizontalBox {
+    flex-grow: 1;
     min-width: 0;
     min-height: 0;
     width: 100%;
diff --git a/packages/ui/src/components/ShowMore.svelte b/packages/ui/src/components/ShowMore.svelte
index ee4d7993b4..fa008f2802 100644
--- a/packages/ui/src/components/ShowMore.svelte
+++ b/packages/ui/src/components/ShowMore.svelte
@@ -34,7 +34,7 @@
   $: if (bigger && !ignore) crop = true
 </script>
 
-<div class="relative clear-mins">
+<div class="clear-mins">
   <div
     use:resizeObserver={(element) => {
       cHeight = element.clientHeight
@@ -71,7 +71,7 @@
   .showMore {
     position: absolute;
     left: 50%;
-    bottom: 0;
+    bottom: 0.25rem;
     padding: 0.5rem 1rem;
     transform: translateX(-50%);
 
@@ -82,11 +82,12 @@
     border: 0.5px solid var(--popup-divider);
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
     border-radius: 2.5rem;
+    // z-index: 1;
     user-select: none;
     cursor: pointer;
 
     &.outter {
-      bottom: -2.75rem;
+      bottom: 0;
       transform: translateX(-50%);
     }
     &:hover {
diff --git a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
index c357c41e6d..e4070adb0f 100644
--- a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
@@ -15,11 +15,13 @@
 <script lang="ts">
   import { createQuery, getClient, draftStore, updateDraftStore } from '@hcengineering/presentation'
   import { ReferenceInput } from '@hcengineering/text-editor'
+  import type { RefAction } from '@hcengineering/text-editor'
   import { deleteFile, uploadFile } from '../utils'
   import attachment from '../plugin'
-  import { IntlString, setPlatformStatus, unknownError } from '@hcengineering/platform'
+  import { IntlString, setPlatformStatus, unknownError, Asset } from '@hcengineering/platform'
   import { createEventDispatcher, onDestroy } from 'svelte'
   import { Account, Class, Doc, generateId, Ref, Space } from '@hcengineering/core'
+  import type { AnySvelteComponent } from '@hcengineering/ui'
   import { Attachment } from '@hcengineering/attachment'
   import AttachmentPresenter from './AttachmentPresenter.svelte'
 
@@ -27,6 +29,8 @@
   export let space: Ref<Space>
   export let _class: Ref<Class<Doc>>
   export let content: string = ''
+  export let iconSend: Asset | AnySvelteComponent | undefined = undefined
+  export let labelSend: IntlString | undefined = undefined
   export let showSend = true
   export let shouldSaveDraft: boolean = false
   export let attachments: Map<Ref<Attachment>, Attachment> = new Map<Ref<Attachment>, Attachment>()
@@ -34,6 +38,7 @@
     refInput.submit()
   }
   export let placeholder: IntlString | undefined = undefined
+  export let extraActions: RefAction[] | undefined = undefined
 
   let refInput: ReferenceInput
 
@@ -273,6 +278,8 @@
     <ReferenceInput
       bind:this={refInput}
       {content}
+      {iconSend}
+      {labelSend}
       {showSend}
       on:message={onMessage}
       haveAttachment={attachments.size > 0}
@@ -282,6 +289,7 @@
       }}
       on:update={onUpdate}
       {placeholder}
+      {extraActions}
     />
   </div>
 </div>
diff --git a/plugins/notification-resources/src/components/NotificationView.svelte b/plugins/notification-resources/src/components/NotificationView.svelte
index 03757c35c7..53a04f9f23 100644
--- a/plugins/notification-resources/src/components/NotificationView.svelte
+++ b/plugins/notification-resources/src/components/NotificationView.svelte
@@ -122,6 +122,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    margin-bottom: 0.75rem;
     padding: 0.5rem 0.75rem 0.75rem;
     min-height: 0;
     border: 1px solid var(--button-border-color);
@@ -130,9 +131,6 @@
     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);
     }
diff --git a/plugins/notification-resources/src/components/NotificationsPopup.svelte b/plugins/notification-resources/src/components/NotificationsPopup.svelte
index 3822c8b77c..4ece585522 100644
--- a/plugins/notification-resources/src/components/NotificationsPopup.svelte
+++ b/plugins/notification-resources/src/components/NotificationsPopup.svelte
@@ -105,7 +105,6 @@
         <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/request-assets/lang/en.json b/plugins/request-assets/lang/en.json
index 6253995df8..4ee248978d 100644
--- a/plugins/request-assets/lang/en.json
+++ b/plugins/request-assets/lang/en.json
@@ -15,6 +15,7 @@
     "Reject": "Reject",
     "Rejected": "Rejected",
     "Comment": "Comment",
-    "PleaseTypeMessage": "Please type comment message to continue..."
+    "PleaseTypeMessage": "Please type comment message to continue...",
+    "NoRequests": "No requests"
   }
 }
\ No newline at end of file
diff --git a/plugins/request-assets/lang/ru.json b/plugins/request-assets/lang/ru.json
index 0c840d68d0..fad8f19f27 100644
--- a/plugins/request-assets/lang/ru.json
+++ b/plugins/request-assets/lang/ru.json
@@ -15,6 +15,7 @@
     "Reject": "Отклонить",
     "Rejected": "Отклонен",
     "Comment": "Комментировать",
-    "PleaseTypeMessage": "Пожалуйста оставьте коментарий чтобы продолжить..."
+    "PleaseTypeMessage": "Пожалуйста оставьте коментарий чтобы продолжить...",
+    "NoRequests": "Нет запросов"
   }
 }
\ No newline at end of file
diff --git a/plugins/request-resources/package.json b/plugins/request-resources/package.json
index 5de6d05948..d05ef1f119 100644
--- a/plugins/request-resources/package.json
+++ b/plugins/request-resources/package.json
@@ -44,6 +44,7 @@
     "@hcengineering/chunter-resources": "^0.6.0",
     "@hcengineering/attachment-resources": "^0.6.0",
     "@hcengineering/view": "^0.6.2",
-    "@hcengineering/view-resources": "^0.6.0"
+    "@hcengineering/view-resources": "^0.6.0",
+    "@hcengineering/text-editor": "^0.6.0"
   }
 }
diff --git a/plugins/request-resources/src/components/RequestActions.svelte b/plugins/request-resources/src/components/RequestActions.svelte
index f745ea9d70..ab9c8d029e 100644
--- a/plugins/request-resources/src/components/RequestActions.svelte
+++ b/plugins/request-resources/src/components/RequestActions.svelte
@@ -20,8 +20,11 @@
   import { AttachedData, getCurrentAccount, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Request, RequestStatus } from '@hcengineering/request'
-  import { Button } from '@hcengineering/ui'
   import request from '../plugin'
+  import type { RefAction } from '@hcengineering/text-editor'
+  import DocFail from './icons/DocFail.svelte'
+  import DocSuccess from './icons/DocSuccess.svelte'
+  import Comments from './icons/Comments.svelte'
 
   export let value: Request
 
@@ -84,6 +87,25 @@
   }
 
   let refInput: AttachmentRefInput
+  let extraActions: RefAction[]
+  $: extraActions = [
+    {
+      label: request.string.Approve,
+      icon: DocSuccess,
+      action: () => approve(),
+      order: 1000,
+      fill: 'var(--won-color)',
+      disabled
+    },
+    {
+      label: request.string.Reject,
+      icon: DocFail,
+      action: () => reject(),
+      order: 2000,
+      fill: 'var(--lost-color)',
+      disabled
+    }
+  ]
 </script>
 
 {#if value.status === RequestStatus.Active}
@@ -93,16 +115,11 @@
       space={value.space}
       _class={value._class}
       objectId={value._id}
-      showSend={false}
+      iconSend={Comments}
+      labelSend={request.string.Comment}
       on:update={onUpdate}
       placeholder={request.string.PleaseTypeMessage}
+      extraActions={approvable ? extraActions : undefined}
     />
   </div>
-  <div class="mt-2 flex gap-2">
-    <Button label={request.string.Comment} {disabled} on:click={saveComment} />
-    {#if approvable}
-      <Button label={request.string.Approve} {disabled} on:click={approve} />
-      <Button label={request.string.Reject} {disabled} on:click={reject} />
-    {/if}
-  </div>
 {/if}
diff --git a/plugins/request-resources/src/components/RequestView.svelte b/plugins/request-resources/src/components/RequestView.svelte
index 3c575a53cb..b5a1ae3ae5 100644
--- a/plugins/request-resources/src/components/RequestView.svelte
+++ b/plugins/request-resources/src/components/RequestView.svelte
@@ -63,10 +63,14 @@
 <style lang="scss">
   .container {
     background-color: var(--body-color);
-    margin: 0.5rem;
-    padding: 0.75rem;
-    border-radius: 0.5rem;
+    padding: 0.5rem 0.75rem 0.75rem;
+    min-height: 0;
+    border-radius: 0.75rem;
     border: 1px solid var(--divider-color);
+
+    &:not(:last-child) {
+      margin-bottom: 0.75rem;
+    }
   }
 
   .label {
diff --git a/plugins/request-resources/src/components/RequestsPopup.svelte b/plugins/request-resources/src/components/RequestsPopup.svelte
index d8d9a3adfb..f0a0112a07 100644
--- a/plugins/request-resources/src/components/RequestsPopup.svelte
+++ b/plugins/request-resources/src/components/RequestsPopup.svelte
@@ -34,15 +34,19 @@
   )
 </script>
 
-<div class="notifyPopup">
-  <div class="header">
+<div class="notifyPopup" class:justify-center={requests.length === 0}>
+  <div class="header flex-between">
     <span class="fs-title overflow-label"><Label label={request.string.Requests} /></span>
   </div>
-  <Scroller>
-    <div class="px-4 clear-mins">
+  {#if requests.length > 0}
+    <Scroller padding={'0 .5rem'}>
       {#each requests as request (request._id)}
         <RequestView value={request} />
       {/each}
+    </Scroller>
+  {:else}
+    <div class="flex-grow flex-center">
+      <Label label={request.string.NoRequests} />
     </div>
-  </Scroller>
+  {/if}
 </div>
diff --git a/plugins/request-resources/src/components/icons/Comments.svelte b/plugins/request-resources/src/components/icons/Comments.svelte
new file mode 100644
index 0000000000..ba5456a47c
--- /dev/null
+++ b/plugins/request-resources/src/components/icons/Comments.svelte
@@ -0,0 +1,38 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M22,10.2h-3.2V3c0-0.4-0.3-0.8-0.8-0.8H2C1.6,2.2,1.2,2.6,1.2,3v12c0,0.4,0.3,0.8,0.8,0.8h2.2L6,17.5c0.3,0.3,0.8,0.3,1.1,0l1.8-1.8h1.4V19c0,0.4,0.3,0.8,0.8,0.8h5.2l1.3,1.3c0.3,0.3,0.8,0.3,1.1,0l1.3-1.3H22c0.4,0,0.8-0.3,0.8-0.8v-8C22.8,10.6,22.4,10.2,22,10.2z M8.5,14.2c-0.2,0-0.4,0.1-0.5,0.2l-1.5,1.5L5,14.5c-0.1-0.1-0.3-0.2-0.5-0.2H2.8V3.8h14.5V11v3.2H11H8.5z M21.2,18.2h-1.8c-0.2,0-0.4,0.1-0.5,0.2l-1,1l-1-1c-0.1-0.1-0.3-0.2-0.5-0.2h-4.8v-2.5H18c0.4,0,0.8-0.3,0.8-0.8v-3.2h2.5V18.2z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9,10.2H6c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h3c0.4,0,0.8-0.3,0.8-0.8S9.4,10.2,9,10.2z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6,7.8h6c0.4,0,0.8-0.3,0.8-0.8S12.4,6.2,12,6.2H6C5.6,6.2,5.2,6.6,5.2,7S5.6,7.8,6,7.8z"
+    />
+  </g>
+</svg>
diff --git a/plugins/request-resources/src/components/icons/DocFail.svelte b/plugins/request-resources/src/components/icons/DocFail.svelte
new file mode 100644
index 0000000000..b6f6ed79aa
--- /dev/null
+++ b/plugins/request-resources/src/components/icons/DocFail.svelte
@@ -0,0 +1,43 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19,1.2H5C4,1.2,3.2,2,3.2,3v18c0,1,0.8,1.8,1.8,1.8h14c1,0,1.8-0.8,1.8-1.8V3C20.8,2,20,1.2,19,1.2z M19.2,21c0,0.1-0.1,0.2-0.2,0.2H5c-0.1,0-0.2-0.1-0.2-0.2V3c0-0.1,0.1-0.2,0.2-0.2h14c0.1,0,0.2,0.1,0.2,0.2V21z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15.5,14.2h-7c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h7c0.4,0,0.8-0.3,0.8-0.8S15.9,14.2,15.5,14.2z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12,17.2H8.5c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8H12c0.4,0,0.8-0.3,0.8-0.8S12.4,17.2,12,17.2z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.5,11c0.3,0.3,0.8,0.3,1.1,0L12,9.6l1.5,1.5c0.3,0.3,0.8,0.3,1.1,0s0.3-0.8,0-1.1l-1.5-1.5L14.5,7c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.8-0.3-1.1,0L12,7.4L10.5,6c-0.3-0.3-0.8-0.3-1.1,0S9.2,6.7,9.5,7L11,8.5L9.5,10C9.2,10.3,9.2,10.7,9.5,11z"
+    />
+  </g>
+</svg>
diff --git a/plugins/request-resources/src/components/icons/DocSuccess.svelte b/plugins/request-resources/src/components/icons/DocSuccess.svelte
new file mode 100644
index 0000000000..bd049595c8
--- /dev/null
+++ b/plugins/request-resources/src/components/icons/DocSuccess.svelte
@@ -0,0 +1,43 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  export let size: 'x-small' | 'small' | 'medium' | 'large'
+  export let fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19,1.2H5C4,1.2,3.2,2,3.2,3v18c0,1,0.8,1.8,1.8,1.8h14c1,0,1.8-0.8,1.8-1.8V3C20.8,2,20,1.2,19,1.2z M19.2,21c0,0.1-0.1,0.2-0.2,0.2H5c-0.1,0-0.2-0.1-0.2-0.2V3c0-0.1,0.1-0.2,0.2-0.2h14c0.1,0,0.2,0.1,0.2,0.2V21z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15.5,14.2h-7c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h7c0.4,0,0.8-0.3,0.8-0.8S15.9,14.2,15.5,14.2z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12,17.2H8.5c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8H12c0.4,0,0.8-0.3,0.8-0.8S12.4,17.2,12,17.2z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.5,11c0.3,0.3,0.8,0.3,1.1,0l4-4c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.8-0.3-1.1,0L11,9.4L9.5,8C9.2,7.7,8.8,7.7,8.5,8S8.2,8.7,8.5,9L10.5,11z"
+    />
+  </g>
+</svg>
diff --git a/plugins/request-resources/src/plugin.ts b/plugins/request-resources/src/plugin.ts
index 6e71cba274..6e47003405 100644
--- a/plugins/request-resources/src/plugin.ts
+++ b/plugins/request-resources/src/plugin.ts
@@ -31,6 +31,7 @@ export default mergeIds(requestId, request, {
     Request: '' as IntlString,
     Rejected: '' as IntlString,
     Comment: '' as IntlString,
-    PleaseTypeMessage: '' as IntlString
+    PleaseTypeMessage: '' as IntlString,
+    NoRequests: '' as IntlString
   }
 })