From f004db3d261afa076c0f9f8e932250d35a84b69b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 18 Jul 2022 11:16:36 +0530
Subject: [PATCH] feat: New sidebar component for help-center (#5017)

* feat: New sidebar component for help-center

* chore: Review fixes

* chore: Minor fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../helpCenter/Sidebar/Sidebar.stories.js     | 134 ++++++++++++++++++
 .../components/helpCenter/Sidebar/Sidebar.vue |  88 ++++++++++++
 .../helpCenter/Sidebar/SidebarHeader.vue      | 113 +++++++++++++++
 .../helpCenter/Sidebar/SidebarSearch.vue      |  62 ++++++++
 .../SecondaryChildNavItem.vue                 |  26 ++++
 .../sidebarComponents/SecondaryNavItem.vue    |  83 +++++++++--
 .../dashboard/i18n/locale/en/helpCenter.json  |   5 +
 .../dashboard/i18n/locale/en/settings.json    |   9 +-
 .../FluentIcon/dashboard-icons.json           |   5 +
 9 files changed, 511 insertions(+), 14 deletions(-)
 create mode 100644 app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js
 create mode 100644 app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue
 create mode 100644 app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue
 create mode 100644 app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue

diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js
new file mode 100644
index 000000000..245eded8b
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js
@@ -0,0 +1,134 @@
+import { action } from '@storybook/addon-actions';
+import Sidebar from './Sidebar';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+
+export default {
+  title: 'Components/Help Center/Sidebar',
+  component: { Sidebar, Thumbnail },
+  argTypes: {
+    thumbnailSrc: {
+      defaultValue: '',
+      control: {
+        type: 'text',
+      },
+    },
+    headerTitle: {
+      defaultValue: '',
+      control: {
+        type: 'text',
+      },
+    },
+    subTitle: {
+      defaultValue: '',
+      control: {
+        type: 'text',
+      },
+    },
+    accessibleMenuItems: [],
+    additionalSecondaryMenuItems: [],
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Sidebar },
+  template: '<sidebar v-bind="$props" @input="onSearch"></sidebar>',
+});
+
+export const HelpCenterSidebarView = Template.bind({});
+HelpCenterSidebarView.args = {
+  onSearch: action('search'),
+  thumbnailSrc: '',
+  headerTitle: 'Help Center',
+  subTitle: 'English',
+  accessibleMenuItems: [
+    {
+      icon: 'book',
+      label: 'HELP_CENTER.ALL_ARTICLES',
+      key: 'helpcenter_all',
+      count: 199,
+      toState: 'accounts/1/articles/all',
+      toolTip: 'All Articles',
+      toStateName: 'helpcenter_all',
+    },
+    {
+      icon: 'pen',
+      label: 'HELP_CENTER.MY_ARTICLES',
+      key: 'helpcenter_mine',
+      count: 112,
+      toState: 'accounts/1/articles/mine',
+      toolTip: 'My articles',
+      toStateName: 'helpcenter_mine',
+    },
+    {
+      icon: 'draft',
+      label: 'HELP_CENTER.DRAFT',
+      key: 'helpcenter_draft',
+      count: 32,
+      toState: 'accounts/1/articles/draft',
+      toolTip: 'Draft',
+      toStateName: 'helpcenter_draft',
+    },
+    {
+      icon: 'archive',
+      label: 'HELP_CENTER.ARCHIVED',
+      key: 'helpcenter_archive',
+      count: 10,
+      toState: 'accounts/1/articles/archived',
+      toolTip: 'Archived',
+      toStateName: 'helpcenter_archive',
+    },
+  ],
+  additionalSecondaryMenuItems: [
+    {
+      icon: 'folder',
+      label: 'HELP_CENTER.CATEGORY',
+      hasSubMenu: true,
+      key: 'category',
+      children: [
+        {
+          id: 1,
+          label: 'Getting started',
+          count: 12,
+          truncateLabel: true,
+          toState: 'accounts/1/articles/categories/new',
+        },
+        {
+          id: 2,
+          label: 'Channel',
+          count: 19,
+          truncateLabel: true,
+          toState: 'accounts/1/articles/categories/channel',
+        },
+        {
+          id: 3,
+          label: 'Feature',
+          count: 24,
+          truncateLabel: true,
+          toState: 'accounts/1/articles/categories/feature',
+        },
+        {
+          id: 4,
+          label: 'Advanced',
+          count: 8,
+          truncateLabel: true,
+          toState: 'accounts/1/articles/categories/advanced',
+        },
+        {
+          id: 5,
+          label: 'Mobile app',
+          count: 3,
+          truncateLabel: true,
+          toState: 'accounts/1/articles/categories/mobile-app',
+        },
+        {
+          id: 6,
+          label: 'Others',
+          count: 39,
+          truncateLabel: true,
+          toState: 'accounts/1/articles/categories/others',
+        },
+      ],
+    },
+  ],
+};
diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue
new file mode 100644
index 000000000..2f8fdd2fd
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="main-nav secondary-menu">
+    <sidebar-header
+      :thumbnail-src="thumbnailSrc"
+      :header-title="headerTitle"
+      :sub-title="subTitle"
+    />
+    <sidebar-search @input="onSearch" />
+    <!-- <transition-group name="menu-list" tag="ul" class="menu vertical"> -->
+    <div name="menu-list" tag="ul" class="menu vertical">
+      <secondary-nav-item
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+        :is-help-center-sidebar="true"
+      />
+    </div>
+    <div name="menu-list" tag="ul" class="menu vertical">
+      <secondary-nav-item
+        v-for="menuItem in additionalSecondaryMenuItems"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        :is-help-center-sidebar="true"
+      />
+    </div>
+    <!-- </transition-group> -->
+  </div>
+</template>
+
+<script>
+import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem';
+import SidebarSearch from './SidebarSearch';
+import SidebarHeader from './SidebarHeader';
+
+export default {
+  components: {
+    SecondaryNavItem,
+    SidebarSearch,
+    SidebarHeader,
+  },
+  props: {
+    thumbnailSrc: {
+      type: String,
+      default: '',
+    },
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    accessibleMenuItems: {
+      type: Array,
+      default: () => [],
+    },
+    additionalSecondaryMenuItems: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onSearch(value) {
+      this.$emit('input', value);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.secondary-menu {
+  background: var(--white);
+  border-right: 1px solid var(--s-50);
+  height: 100%;
+  width: var(--space-giga);
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: var(--space-small);
+
+  &:hover {
+    overflow: auto;
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue
new file mode 100644
index 000000000..a68ea6b63
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="sidebar-header--wrap">
+    <div class="header-left--side">
+      <thumbnail
+        size="40px"
+        :src="thumbnailSrc"
+        :username="headerTitle"
+        variant="square"
+      />
+      <div class="header-title--wrap">
+        <h4 class="sub-block-title title-view">{{ headerTitle }}</h4>
+        <span class="sub-title--view">{{ subTitle }}</span>
+      </div>
+    </div>
+    <div class="header-right--side">
+      <fluent-icon
+        icon="arrow-up-right"
+        size="28px"
+        class="pop-out--icon"
+        @click="popOutHelpCenter"
+      />
+      <fluent-icon
+        icon="arrow-swap"
+        size="28px"
+        class="portal-switch--icon"
+        @click="openSwitchPortalModal"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    thumbnailSrc: {
+      type: String,
+      default: '',
+    },
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    popOutHelpCenter() {
+      this.$emit('pop-out');
+    },
+    openSwitchPortalModal() {
+      this.$emit('open');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sidebar-header--wrap {
+  display: flex;
+  height: var(--space-jumbo);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-normal) 0;
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.header-title--wrap {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  margin-left: var(--space-small);
+}
+
+.title-view {
+  margin-bottom: var(--space-zero);
+}
+
+.sub-title--view {
+  font-size: var(--font-size-mini);
+  color: var(--b-600);
+}
+
+.header-left--side {
+  display: flex;
+  align-items: center;
+}
+
+.header-right--side {
+  display: flex;
+  align-items: center;
+}
+
+.pop-out--icon {
+  padding: var(--space-smaller);
+}
+
+.portal-switch--icon {
+  padding: var(--space-smaller);
+  margin-left: var(--space-small);
+
+  &:hover {
+    cursor: pointer;
+    background: var(--s-50);
+    border-radius: var(--border-radius-normal);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue
new file mode 100644
index 000000000..8af29af17
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="search-input--wrap">
+    <div class="search-icon--wrap">
+      <fluent-icon icon="search" size="18" class="search-icon" />
+    </div>
+    <input
+      v-model="searchValue"
+      class="search-input"
+      :placeholder="$t('HELP_CENTER.SIDEBAR.SEARCH.PLACEHOLDER')"
+      @input="onSearch"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchValue: '',
+    };
+  },
+  methods: {
+    onSearch(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search-input--wrap {
+  display: flex;
+  padding: var(--space-small) var(--space-zero);
+  width: 100%;
+}
+
+.search-input {
+  width: 100%;
+  height: var(--space-large);
+  border-radius: var(--border-radius-normal);
+  background: var(--s-25);
+  font-size: var(--font-size-small);
+  padding: var(--space-small) var(--space-small) var(--space-small)
+    var(--space-large);
+  border: 1px solid var(--s-50);
+
+  &:focus {
+    border-color: var(--w-500);
+  }
+}
+
+.search-icon--wrap {
+  position: relative;
+}
+
+.search-icon {
+  position: absolute;
+  color: var(--s-500);
+  top: var(--space-small);
+  left: var(--space-small);
+}
+</style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index 812871ad7..de10dda4a 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -26,6 +26,9 @@
           :class="{ 'text-truncate': shouldTruncate }"
         >
           {{ label }}
+          <span v-if="isHelpCenterSidebar && childItemCount" class="count-view">
+            {{ childItemCount }}
+          </span>
         </span>
         <span v-if="count" class="badge" :class="{ secondary: !isActive }">
           {{ count }}
@@ -73,6 +76,14 @@ export default {
       type: String,
       default: '',
     },
+    isHelpCenterSidebar: {
+      type: Boolean,
+      default: false,
+    },
+    childItemCount: {
+      type: Number,
+      default: 0,
+    },
   },
   computed: {
     showIcon() {
@@ -155,4 +166,19 @@ $label-badge-size: var(--space-slab);
   color: var(--s-600);
   font-weight: var(--font-weight-bold);
 }
+
+.count-view {
+  background: var(--s-50);
+  border-radius: var(--border-radius-normal);
+  color: var(--s-600);
+  font-size: var(--font-size-micro);
+  font-weight: var(--font-weight-bold);
+  margin-left: var(--space-smaller);
+  padding: var(--space-zero) var(--space-smaller);
+
+  &.is-active {
+    background: var(--w-50);
+    color: var(--w-500);
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 1fcde8948..e89a1ab51 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -1,8 +1,14 @@
 <template>
   <li class="sidebar-item">
-    <span v-if="hasSubMenu" class="secondary-menu--title fs-small">
-      {{ $t(`SIDEBAR.${menuItem.label}`) }}
-    </span>
+    <div v-if="hasSubMenu" class="secondary-menu--wrap">
+      <span class="secondary-menu--title fs-small">
+        {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      </span>
+      <div v-if="isHelpCenterSidebar" class="submenu-icons">
+        <fluent-icon icon="search" class="submenu-icon" size="16" />
+        <fluent-icon icon="add" class="submenu-icon" size="16" />
+      </div>
+    </div>
     <router-link
       v-else
       class="secondary-menu--title secondary-menu--link fs-small"
@@ -15,6 +21,13 @@
         size="14"
       />
       {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      <span
+        v-if="isHelpCenterSidebar"
+        class="count-view"
+        :class="computedClass"
+      >
+        {{ `${menuItem.count}` }}
+      </span>
       <span
         v-if="menuItem.label === 'AUTOMATION'"
         data-view-component="true"
@@ -35,6 +48,8 @@
         :should-truncate="child.truncateLabel"
         :icon="computedInboxClass(child)"
         :warning-icon="computedInboxErrorClass(child)"
+        :is-help-center-sidebar="isHelpCenterSidebar"
+        :child-item-count="child.count"
       />
       <router-link
         v-if="showItem(menuItem)"
@@ -79,6 +94,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    isHelpCenterSidebar: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters({ activeInbox: 'getSelectedInbox' }),
@@ -120,17 +139,19 @@ export default {
       // If active Inbox is present
       // donot highlight conversations
       if (this.activeInbox) return ' ';
-
-      if (
-        this.isInboxConversation ||
-        this.isTeamsSettings ||
-        this.isInboxsSettings ||
-        this.isIntegrationsSettings ||
-        this.isApplicationsSettings
-      ) {
-        return 'is-active';
+      if (this.hasSubMenu) {
+        if (
+          this.isInboxConversation ||
+          this.isTeamsSettings ||
+          this.isInboxsSettings ||
+          this.isIntegrationsSettings ||
+          this.isApplicationsSettings
+        ) {
+          return 'is-active';
+        }
+        return ' ';
       }
-      return ' ';
+      return '';
     },
   },
   methods: {
@@ -170,6 +191,11 @@ export default {
   margin: var(--space-smaller) 0 0;
 }
 
+.secondary-menu--wrap {
+  display: flex;
+  justify-content: space-between;
+}
+
 .secondary-menu--title {
   color: var(--s-600);
   display: flex;
@@ -242,6 +268,7 @@ export default {
     color: var(--w-500);
   }
 }
+
 .beta {
   padding-right: var(--space-smaller) !important;
   padding-left: var(--space-smaller) !important;
@@ -255,4 +282,34 @@ export default {
   color: var(--g-800);
   border-color: var(--g-700);
 }
+
+.count-view {
+  background: var(--s-50);
+  border-radius: var(--border-radius-normal);
+  color: var(--s-600);
+  font-size: var(--font-size-micro);
+  font-weight: var(--font-weight-bold);
+  margin-left: var(--space-smaller);
+  padding: var(--space-zero) var(--space-smaller);
+
+  &.is-active {
+    background: var(--w-50);
+    color: var(--w-500);
+  }
+}
+
+.submenu-icons {
+  display: flex;
+  align-items: center;
+
+  .submenu-icon {
+    margin-left: var(--space-small);
+    color: var(--s-600);
+
+    &:hover {
+      cursor: pointer;
+      color: var(--w-500);
+    }
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index 14bd16eda..0c04a6c37 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -26,6 +26,11 @@
       "COLUMNS": {
         "BY": "by"
       }
+    },
+    "SIDEBAR": {
+      "SEARCH": {
+        "PLACEHOLDER": "Search for articles"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 9299be2b5..0307abe56 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -186,7 +186,14 @@
     "SET_AVAILABILITY_TITLE": "Set yourself as",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
-    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services"
+    "FACEBOOK_REAUTHORIZE": "Your Facebook connection has expired, please reconnect your Facebook page to continue services",
+    "HELP_CENTER": {
+      "ALL_ARTICLES": "All Articles",
+      "MY_ARTICLES": "My Articles",
+      "DRAFT": "Draft",
+      "ARCHIVED": "Archived",
+      "CATEGORY": "Category"
+    }
   },
   "CREATE_ACCOUNT": {
     "NO_ACCOUNT_WARNING": "Uh oh! We could not find any Chatwoot accounts. Please create a new account to continue.",
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 3f9572c2c..ed818374d 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -2,9 +2,11 @@
   "add-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7Z",
   "add-outline": "M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z",
   "alert-outline": "M12 1.996a7.49 7.49 0 0 1 7.496 7.25l.004.25v4.097l1.38 3.156a1.25 1.25 0 0 1-1.145 1.75L15 18.502a3 3 0 0 1-5.995.177L9 18.499H4.275a1.251 1.251 0 0 1-1.147-1.747L4.5 13.594V9.496c0-4.155 3.352-7.5 7.5-7.5ZM13.5 18.5l-3 .002a1.5 1.5 0 0 0 2.993.145l.006-.147ZM12 3.496c-3.32 0-6 2.674-6 6v4.41L4.656 17h14.697L18 13.907V9.509l-.004-.225A5.988 5.988 0 0 0 12 3.496Z",
+  "archive-outline": "M19.25 3c.966 0 1.75.784 1.75 1.75v2c0 .698-.408 1.3-1 1.581v9.919A3.75 3.75 0 0 1 16.25 22h-8.5A3.75 3.75 0 0 1 4 18.25V8.332A1.75 1.75 0 0 1 3 6.75v-2C3 3.784 3.784 3 4.75 3h14.5Zm-.75 5.5h-13v9.75a2.25 2.25 0 0 0 2.25 2.25h8.5a2.25 2.25 0 0 0 2.25-2.25V8.5Zm-8.5 3h4a.75.75 0 0 1 .102 1.493L14 13h-4a.75.75 0 0 1-.102-1.493L10 11.5h4-4Zm9.25-7H4.75a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h14.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Z",
   "arrow-chevron-left-outline": "M15 17.898c0 1.074-1.265 1.648-2.073.941l-6.31-5.522a1.75 1.75 0 0 1 0-2.634l6.31-5.522c.808-.707 2.073-.133 2.073.941v11.796Z",
   "arrow-chevron-right-outline": "M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796Z",
   "arrow-clockwise-outline": "M12 4.75a7.25 7.25 0 1 0 7.201 6.406c-.068-.588.358-1.156.95-1.156.515 0 .968.358 1.03.87a9.25 9.25 0 1 1-3.432-6.116V4.25a1 1 0 1 1 2.001 0v2.698l.034.052h-.034v.25a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h.666A7.219 7.219 0 0 0 12 4.75Z",
+  "arrow-up-right-outline": "M12.748 3.001h7.554l.1.014.099.028.06.026a.72.72 0 0 1 .219.15l.04.044.061.082.037.065.04.09.018.064.014.064.01.093v7.534a.75.75 0 0 1-1.493.102l-.007-.102V5.559L4.28 20.784a.75.75 0 0 1-.977.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L18.439 4.5l-5.69.001a.75.75 0 0 1-.744-.648l-.007-.102a.75.75 0 0 1 .648-.743L12.748 3Z",
   "arrow-download-outline": "M18.25 20.5a.75.75 0 1 1 0 1.5l-13 .004a.75.75 0 1 1 0-1.5l13-.004ZM11.648 2.012l.102-.007a.75.75 0 0 1 .743.648l.007.102-.001 13.685 3.722-3.72a.75.75 0 0 1 .976-.073l.085.073a.75.75 0 0 1 .072.976l-.073.084-4.997 4.997a.75.75 0 0 1-.976.073l-.085-.073-5.003-4.996a.75.75 0 0 1 .976-1.134l.084.072 3.719 3.714L11 2.755a.75.75 0 0 1 .648-.743l.102-.007-.102.007Z",
   "arrow-redo-outline": "M19.25 2a.75.75 0 0 0-.743.648l-.007.102v5.69l-4.574-4.56a6.41 6.41 0 0 0-8.878-.179l-.186.18a6.41 6.41 0 0 0 0 9.063l8.845 8.84a.75.75 0 0 0 1.06-1.062l-8.845-8.838a4.91 4.91 0 0 1 6.766-7.112l.178.17L17.438 9.5H11.75a.75.75 0 0 0-.743.648L11 10.25c0 .38.282.694.648.743l.102.007h7.5a.75.75 0 0 0 .743-.648L20 10.25v-7.5a.75.75 0 0 0-.75-.75Z",
   "arrow-reply-outline": "M9.277 16.221a.75.75 0 0 1-1.061 1.06l-4.997-5.003a.75.75 0 0 1 0-1.06L8.217 6.22a.75.75 0 0 1 1.061 1.06L5.557 11h7.842c1.595 0 2.81.242 3.889.764l.246.126a6.203 6.203 0 0 1 2.576 2.576c.61 1.14.89 2.418.89 4.135a.75.75 0 0 1-1.5 0c0-1.484-.228-2.52-.713-3.428a4.702 4.702 0 0 0-1.96-1.96c-.838-.448-1.786-.676-3.094-.709L13.4 12.5H5.562l3.715 3.721Z",
@@ -19,6 +21,7 @@
     "M21.78 3.28a.75.75 0 0 0-1.06-1.06l-2.012 2.012a4.251 4.251 0 0 0-5.463.462l-1.068 1.069a1.75 1.75 0 0 0 0 2.474l3.585 3.586a1.75 1.75 0 0 0 2.475 0l1.068-1.068a4.251 4.251 0 0 0 .463-5.463L21.78 3.28zm-3.585 2.475l.022.023l.003.002l.002.003l.023.022a2.75 2.75 0 0 1 0 3.89l-1.068 1.067a.25.25 0 0 1-.354 0l-3.586-3.585a.25.25 0 0 1 0-.354l1.068-1.068a2.75 2.75 0 0 1 3.89 0z",
     "M10.78 11.28a.75.75 0 1 0-1.06-1.06L8 11.94l-.47-.47a.75.75 0 0 0-1.06 0l-1.775 1.775a4.251 4.251 0 0 0-.463 5.463L2.22 20.72a.75.75 0 1 0 1.06 1.06l2.012-2.012a4.251 4.251 0 0 0 5.463-.463l1.775-1.775a.75.75 0 0 0 0-1.06l-.47-.47l1.72-1.72a.75.75 0 1 0-1.06-1.06L11 14.94L9.06 13l1.72-1.72zm-3.314 2.247l.004.003l.003.004l2.993 2.993l.004.003l.003.004l.466.466l-1.244 1.245a2.75 2.75 0 0 1-3.89 0l-.05-.05a2.75 2.75 0 0 1 0-3.89L7 13.062l.466.466z"
   ],
+  "book-outline": "M4 4.5A2.5 2.5 0 0 1 6.5 2H18a2.5 2.5 0 0 1 2.5 2.5v14.25a.75.75 0 0 1-.75.75H5.5a1 1 0 0 0 1 1h13.25a.75.75 0 0 1 0 1.5H6.5A2.5 2.5 0 0 1 4 19.5v-15ZM5.5 18H19V4.5a1 1 0 0 0-1-1H6.5a1 1 0 0 0-1 1V18Z",
   "book-contacts-outline": "M15.5 12.25a.75.75 0 0 0-.75-.75h-5a.75.75 0 0 0-.75.75v.5c0 1 1.383 1.75 3.25 1.75s3.25-.75 3.25-1.75v-.5ZM14 8.745C14 7.78 13.217 7 12.25 7s-1.75.779-1.75 1.745a1.75 1.75 0 1 0 3.5 0ZM4 4.5A2.5 2.5 0 0 1 6.5 2H18a2.5 2.5 0 0 1 2.5 2.5v14.25a.75.75 0 0 1-.75.75H5.5a1 1 0 0 0 1 1h13.25a.75.75 0 0 1 0 1.5H6.5A2.5 2.5 0 0 1 4 19.5v-15Zm1.5 0V18H19V4.5a1 1 0 0 0-1-1H6.5a1 1 0 0 0-1 1Z",
   "book-clock-outline": [
     "M13 9.125v1.625h.75a.625.625 0 1 1 0 1.25H12.5a.615.615 0 0 1-.063-.003.625.625 0 0 1-.688-.622v-2.25a.625.625 0 1 1 1.251 0Z",
@@ -64,6 +67,7 @@
   "dismiss-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm3.446 4.897.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 12l2.47 2.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-2.47 2.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L10.939 12l-2.47-2.47a.75.75 0 0 1-.072-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l2.47-2.47a.75.75 0 0 1 .976-.072Z",
   "dismiss-outline": "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",
   "document-outline": "M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10Zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621Zm5.914 3.793-5.829-5.828c-.026-.026-.058-.046-.085-.07a2.072 2.072 0 0 0-.219-.18c-.04-.027-.086-.045-.128-.068-.071-.04-.141-.084-.216-.116a1.977 1.977 0 0 0-.624-.138C12.266 2.011 12.22 2 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414Z",
+  "draft-outline": "m20.877 2.826.153.144.145.153a3.579 3.579 0 0 1-.145 4.908L9.062 19.999a2.25 2.25 0 0 1-1 .58l-5.115 1.395a.75.75 0 0 1-.92-.921l1.394-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.579 3.579 0 0 1 4.908-.144ZM15 6.06l-9.938 9.938a.75.75 0 0 0-.193.333l-1.05 3.85 3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9 15 6.06ZM6.525 11l-1.5 1.5H2.75a.75.75 0 0 1 0-1.5h3.775Zm4-4-1.5 1.5H2.75a.75.75 0 1 1 0-1.5h7.775Zm6.505-2.97-.97.97 2.939 2.94.97-.97a2.078 2.078 0 1 0-2.939-2.94ZM14.525 3l-1.5 1.5H2.75a.75.75 0 1 1 0-1.5h11.775Z",
   "dual-screen-clock-outline": "M10.019 6.002a6.632 6.632 0 0 0 .058 1.5H3.75a.25.25 0 0 0-.25.25v12.494c0 .138.112.25.25.25h7.498l-.001-10.167c.416.57.924 1.07 1.5 1.479v8.69h7.498a.25.25 0 0 0 .25-.25v-8.62a6.535 6.535 0 0 0 1.501-1.656V20.25a1.75 1.75 0 0 1-1.75 1.75h-8.998l-.001-.003H3.75A1.75 1.75 0 0 1 2 20.246V7.751c0-.966.784-1.75 1.75-1.75h6.269Zm6.22 11.498a.75.75 0 0 1 .101 1.493L16.24 19h-1.5a.75.75 0 0 1-.102-1.493l.102-.007h1.5Zm-6.996 0a.75.75 0 0 1 .102 1.493L9.243 19H7.74a.75.75 0 0 1-.102-1.493l.102-.007h1.502ZM16.498 1a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Zm-1 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h3.001a.5.5 0 0 0 0-1h-2.501V3.5a.5.5 0 0 0-.5-.5Z",
   "edit-outline": "M21.03 2.97a3.578 3.578 0 0 1 0 5.06L9.062 20a2.25 2.25 0 0 1-.999.58l-5.116 1.395a.75.75 0 0 1-.92-.921l1.395-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.578 3.578 0 0 1 5.06 0ZM15 6.06 5.062 16a.75.75 0 0 0-.193.333l-1.05 3.85 3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9 15 6.06Zm2.03-2.03-.97.97L19 7.94l.97-.97a2.079 2.079 0 0 0-2.94-2.94Z",
   "emoji-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5ZM8.462 14.784A4.491 4.491 0 0 0 12 16.502a4.492 4.492 0 0 0 3.535-1.714.75.75 0 1 1 1.177.93A5.991 5.991 0 0 1 12 18.002a5.991 5.991 0 0 1-4.716-2.29.75.75 0 0 1 1.178-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z",
@@ -97,6 +101,7 @@
   "microphone-play-outline": "M8,5.14V19.14L19,12.14L8,5.14Z",
   "number-symbol-outline": "M10.987 2.89a.75.75 0 1 0-1.474-.28L8.494 7.999 3.75 8a.75.75 0 1 0 0 1.5l4.46-.002-.946 5-4.514.002a.75.75 0 0 0 0 1.5l4.23-.002-.967 5.116a.75.75 0 1 0 1.474.278l1.02-5.395 5.474-.002-.968 5.119a.75.75 0 1 0 1.474.278l1.021-5.398 4.742-.002a.75.75 0 1 0 0-1.5l-4.458.002.946-5 4.512-.002a.75.75 0 1 0 0-1.5l-4.229.002.966-5.104a.75.75 0 0 0-1.474-.28l-1.018 5.385-5.474.002.966-5.107Zm-1.25 6.608 5.474-.003-.946 5-5.474.002.946-5Z",
   "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
+  "pen-outline": "M7.5 2.75a.75.75 0 0 0-1.5 0v3a1.75 1.75 0 0 0 1.543 1.738L6.527 9.993a3.868 3.868 0 0 0 .119 3.143l3.99 7.95c.283.566.803.914 1.364.914s1.08-.348 1.365-.913l3.99-7.951c.481-.96.526-2.137.118-3.143l-1.016-2.505A1.75 1.75 0 0 0 18 5.75v-3a.75.75 0 0 0-1.5 0v3a.25.25 0 0 1-.25.25h-8.5a.25.25 0 0 1-.25-.25v-3Zm7.343 4.75 1.24 3.057c.247.61.217 1.336-.07 1.906l-3.263 6.504v-6.668a1.5 1.5 0 1 0-1.5 0v6.668l-3.264-6.504a2.368 2.368 0 0 1-.069-1.906L9.157 7.5h5.686Z",
   "people-outline": "M4 13.999 13 14a2 2 0 0 1 1.995 1.85L15 16v1.5C14.999 21 11.284 22 8.5 22c-2.722 0-6.335-.956-6.495-4.27L2 17.5v-1.501c0-1.054.816-1.918 1.85-1.995L4 14ZM15.22 14H20c1.054 0 1.918.816 1.994 1.85L22 16v1c-.001 3.062-2.858 4-5 4a7.16 7.16 0 0 1-2.14-.322c.336-.386.607-.827.802-1.327A6.19 6.19 0 0 0 17 19.5l.267-.006c.985-.043 3.086-.363 3.226-2.289L20.5 17v-1a.501.501 0 0 0-.41-.492L20 15.5h-4.051a2.957 2.957 0 0 0-.595-1.34L15.22 14H20h-4.78ZM4 15.499l-.1.01a.51.51 0 0 0-.254.136.506.506 0 0 0-.136.253l-.01.101V17.5c0 1.009.45 1.722 1.417 2.242.826.445 2.003.714 3.266.753l.317.005.317-.005c1.263-.039 2.439-.308 3.266-.753.906-.488 1.359-1.145 1.412-2.057l.005-.186V16a.501.501 0 0 0-.41-.492L13 15.5l-9-.001ZM8.5 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm9 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm-9-.5c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3Zm9 2c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2Z",
   "people-team-outline": "M14.754 10c.966 0 1.75.784 1.75 1.75v4.749a4.501 4.501 0 0 1-9.002 0V11.75c0-.966.783-1.75 1.75-1.75h5.502Zm0 1.5H9.252a.25.25 0 0 0-.25.25v4.749a3.001 3.001 0 0 0 6.002 0V11.75a.25.25 0 0 0-.25-.25ZM3.75 10h3.381a2.738 2.738 0 0 0-.618 1.5H3.75a.25.25 0 0 0-.25.25v3.249a2.501 2.501 0 0 0 3.082 2.433c.085.504.24.985.453 1.432A4.001 4.001 0 0 1 2 14.999V11.75c0-.966.784-1.75 1.75-1.75Zm13.125 0h3.375c.966 0 1.75.784 1.75 1.75V15a4 4 0 0 1-5.03 3.866c.214-.448.369-.929.455-1.433A2.5 2.5 0 0 0 20.5 15v-3.25a.25.25 0 0 0-.25-.25h-2.757a2.738 2.738 0 0 0-.618-1.5ZM12 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm6.5 1a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm6.5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6.5 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-13 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
   "person-add-outline": "M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zm-5.477 2a6.47 6.47 0 0 0-.709 1.5H4.253a.749.749 0 0 0-.75.75v.577c0 .535.192 1.053.54 1.46c1.253 1.469 3.22 2.214 5.957 2.214c.597 0 1.157-.035 1.68-.106c.246.495.553.954.912 1.367c-.795.16-1.66.24-2.592.24c-3.146 0-5.532-.906-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.578A2.249 2.249 0 0 1 4.253 14h7.77zm5.477 0l-.09.008a.5.5 0 0 0-.402.402L17 14.5V17h-2.496l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17L17 20.5l.008.09a.5.5 0 0 0 .402.402l.09.008l.09-.008a.5.5 0 0 0 .402-.402L18 20.5V18h2.504l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.402-.402l-.09-.008H18L18 14.5l-.008-.09a.5.5 0 0 0-.402-.402L17.5 14zM10 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10zm0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7z",