feat(console): add user dropdown and sign out button

packages/console/package.json

@@ -19,7 +19,7 @@
   "devDependencies": {
     "@fontsource/roboto-mono": "^4.5.7",
     "@logto/phrases": "^0.1.0",
-    "@logto/react": "^0.1.11",
+    "@logto/react": "^0.1.12",
     "@logto/shared": "^0.1.0",
     "@logto/schemas": "^0.1.0",
     "@mdx-js/react": "^1.6.22",

packages/console/src/components/AppContent/components/Topbar/index.tsx

@@ -5,6 +5,7 @@ import Spacer from '@/components/Spacer';
 import Logo from '@/icons/Logo';
 import GetStartedProgress from '@/pages/GetStarted/components/GetStartedProgress';
 
+import UserInfo from '../UserInfo';
 import * as styles from './index.module.scss';
 
 const Topbar = () => {
@@ -17,6 +18,7 @@ const Topbar = () => {
       <div className={styles.text}>{t('admin_console.title')}</div>
       <Spacer />
       <GetStartedProgress />
+      <UserInfo />
     </div>
   );
 };

packages/console/src/components/AppContent/components/UserInfo/index.module.scss

@@ -0,0 +1,63 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  display: flex;
+  align-items: center;
+  padding: _.unit(2);
+  margin-left: _.unit(4);
+  border-radius: 8px;
+  transition: background-color 0.2s ease-in-out;
+  user-select: none;
+  cursor: pointer;
+
+  &:hover,
+  &.active {
+    background-color: var(--color-surface-5);
+  }
+
+  img {
+    width: 36px;
+    height: 36px;
+    margin-right: _.unit(2);
+    border-radius: 6px;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+
+    .name {
+      font: var(--font-subhead-2);
+      color: var(--color-text);
+    }
+
+    .role {
+      font: var(--font-body-small);
+      color: var(--color-caption);
+    }
+  }
+}
+
+.dropdown {
+  padding: _.unit(2);
+}
+
+.dropdownItem {
+  height: 40px;
+  padding: 0 _.unit(5) 0 _.unit(4);
+  border-radius: 8px;
+  min-width: 170px;
+
+  &.loading {
+    opacity: 60%;
+    cursor: default;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+
+  .spinner {
+    margin-left: _.unit(6);
+  }
+}

packages/console/src/components/AppContent/components/UserInfo/index.tsx

@@ -0,0 +1,89 @@
+import { useLogto } from '@logto/react';
+import { User, UserRole } from '@logto/schemas';
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState, MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Dropdown, { DropdownItem } from '@/components/Dropdown';
+import Spinner from '@/components/Spinner';
+import { getAvatarById } from '@/consts/avatars';
+import useApi from '@/hooks/use-api';
+import SignOut from '@/icons/SignOut';
+
+import * as styles from './index.module.scss';
+
+const UserInfo = () => {
+  const { isAuthenticated, getIdTokenClaims, signOut } = useLogto();
+  const api = useApi();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [showDropDown, setShowDropdown] = useState(false);
+  const [user, setUser] = useState<User>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      if (isAuthenticated) {
+        const { sub: userId } = getIdTokenClaims() ?? {};
+
+        if (userId) {
+          const data = await api.get(`/api/users/${userId}`).json<User>();
+          setUser(data);
+        }
+      }
+    })();
+  }, [api, isAuthenticated, getIdTokenClaims]);
+
+  if (!user) {
+    return null;
+  }
+
+  const { id, name, avatar, roleNames } = user;
+  const isAdmin = roleNames.includes(UserRole.Admin);
+
+  return (
+    <>
+      <div
+        ref={anchorRef}
+        className={classNames(styles.container, showDropDown && styles.active)}
+        onClick={() => {
+          setShowDropdown(true);
+        }}
+      >
+        <img src={avatar ?? getAvatarById(id)} />
+        <div className={styles.wrapper}>
+          <div className={styles.name}>{name}</div>
+          {isAdmin && <div className={styles.role}>{t('user_details.roles.admin')}</div>}
+        </div>
+      </div>
+      <Dropdown
+        anchorRef={anchorRef}
+        className={styles.dropdown}
+        isOpen={showDropDown}
+        horizontalAlign="end"
+        onClose={() => {
+          setShowDropdown(false);
+        }}
+      >
+        <DropdownItem
+          className={classNames(styles.dropdownItem, isLoading && styles.loading)}
+          icon={<SignOut />}
+          onClick={(event: MouseEvent<HTMLLIElement>) => {
+            event.stopPropagation();
+
+            if (isLoading) {
+              return;
+            }
+            setIsLoading(true);
+            void signOut(`${window.location.origin}/console`);
+          }}
+        >
+          {t('sign_out')}
+          {isLoading && <Spinner className={styles.spinner} />}
+        </DropdownItem>
+      </Dropdown>
+    </>
+  );
+};
+
+export default UserInfo;

packages/console/src/components/Button/index.module.scss

@@ -1,12 +1,14 @@
 @use '@/scss/underscore' as _;
 
 .button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   outline: none;
   border-radius: _.unit(2);
   font: var(--font-button);
-  transition: background 0.2s ease-in-out;
-  align-items: center;
+  transition: background-color 0.2s ease-in-out;
   white-space: nowrap;
   user-select: none;
   position: relative;
@@ -20,16 +22,9 @@
     opacity: 60%;
 
     .spinner {
-      width: 16px;
-      height: 16px;
       position: absolute;
-      top: 50%;
       left: 50%;
-      transform: translate(-50%, -50%);
-
-      svg {
-        @include _.rotating-animation;
-      }
+      transform: translateX(-50%);
     }
 
     .spinner ~ span {

packages/console/src/components/Button/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import React, { HTMLProps, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Spinner from '@/icons/Spinner';
+import Spinner from '@/components/Spinner';
 
 import DangerousRaw from '../DangerousRaw';
 import * as styles from './index.module.scss';
@@ -78,11 +78,7 @@ const Button = ({
       }}
       {...rest}
     >
-      {showSpinner && (
-        <span className={styles.spinner}>
-          <Spinner />
-        </span>
-      )}
+      {showSpinner && <Spinner className={styles.spinner} />}
       {icon && <span className={styles.icon}>{icon}</span>}
       {title && (typeof title === 'string' ? <span>{t(title)}</span> : title)}
     </button>

packages/console/src/components/Dropdown/DropdownItem.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { MouseEvent } from 'react';
 
 import * as styles from './DropdownItem.module.scss';
 
 type Props = {
-  onClick?: () => void;
+  onClick?: (event: MouseEvent<HTMLLIElement>) => void;
   className?: string;
   children: React.ReactNode;
   icon?: React.ReactNode;

packages/console/src/components/Spinner/index.module.scss

@@ -0,0 +1,12 @@
+@use '@/scss/underscore' as _;
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+
+  svg {
+    @include _.rotating-animation;
+  }
+}

packages/console/src/components/Spinner/index.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  className?: string;
+};
+
+const Spinner = ({ className }: Props) => (
+  <span className={classNames(styles.spinner, className)}>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M9.33566 14.8714C9.44104 15.4135 9.08652 15.9451 8.53547 15.9821C7.4048 16.0579 6.2669 15.8929 5.19834 15.4934C3.81639 14.9767 2.60425 14.0879 1.69591 12.9253C0.78758 11.7627 0.218443 10.3715 0.0514252 8.90563C-0.115592 7.43973 0.126015 5.9562 0.749537 4.61905C1.37306 3.28191 2.35421 2.14323 3.5845 1.32891C4.8148 0.514598 6.24632 0.0563637 7.7208 0.00487344C9.19528 -0.0466168 10.6553 0.310643 11.9394 1.03715C12.9323 1.59891 13.7901 2.36452 14.4588 3.27942C14.7847 3.72531 14.6054 4.33858 14.1223 4.60633C13.6393 4.87408 13.0366 4.69278 12.6924 4.26086C12.2154 3.66218 11.6262 3.15785 10.9545 2.77787C9.99146 2.23298 8.89646 1.96504 7.7906 2.00366C6.68474 2.04227 5.6111 2.38595 4.68838 2.99669C3.76565 3.60742 3.02979 4.46143 2.56215 5.46429C2.09451 6.46715 1.91331 7.5798 2.03857 8.67922C2.16383 9.77864 2.59069 10.822 3.27194 11.694C3.95319 12.5659 4.8623 13.2325 5.89876 13.62C6.62154 13.8903 7.38663 14.0175 8.15188 13.9981C8.70399 13.9841 9.23028 14.3293 9.33566 14.8714Z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
+);
+
+export default Spinner;

packages/console/src/icons/SignOut.tsx

@@ -0,0 +1,21 @@
+import React, { SVGProps } from 'react';
+
+const SignOut = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M10.4917 10.8333L8.57508 12.7416C8.49697 12.8191 8.43498 12.9112 8.39267 13.0128C8.35037 13.1143 8.32858 13.2232 8.32858 13.3333C8.32858 13.4433 8.35037 13.5522 8.39267 13.6537C8.43498 13.7553 8.49697 13.8475 8.57508 13.9249C8.65255 14.003 8.74472 14.065 8.84627 14.1073C8.94782 14.1496 9.05674 14.1714 9.16675 14.1714C9.27676 14.1714 9.38568 14.1496 9.48723 14.1073C9.58878 14.065 9.68095 14.003 9.75842 13.9249L13.0917 10.5916C13.1676 10.5123 13.2271 10.4189 13.2667 10.3166C13.3501 10.1137 13.3501 9.88614 13.2667 9.68325C13.2271 9.58096 13.1676 9.48751 13.0917 9.40825L9.75842 6.07492C9.68072 5.99722 9.58847 5.93559 9.48696 5.89354C9.38544 5.85149 9.27663 5.82984 9.16675 5.82984C9.05687 5.82984 8.94806 5.85149 8.84654 5.89354C8.74502 5.93559 8.65278 5.99722 8.57508 6.07492C8.49738 6.15262 8.43575 6.24486 8.3937 6.34638C8.35165 6.4479 8.33001 6.5567 8.33001 6.66659C8.33001 6.77647 8.35165 6.88528 8.3937 6.9868C8.43575 7.08831 8.49738 7.18056 8.57508 7.25825L10.4917 9.16659H2.50008C2.27907 9.16659 2.06711 9.25439 1.91083 9.41067C1.75455 9.56695 1.66675 9.77891 1.66675 9.99992C1.66675 10.2209 1.75455 10.4329 1.91083 10.5892C2.06711 10.7455 2.27907 10.8333 2.50008 10.8333H10.4917ZM10.0001 1.66659C8.44266 1.65963 6.91445 2.08926 5.5888 2.90675C4.26316 3.72423 3.19313 4.89685 2.50008 6.29159C2.40063 6.4905 2.38426 6.72077 2.45459 6.93175C2.52491 7.14273 2.67617 7.31713 2.87508 7.41659C3.07399 7.51604 3.30427 7.53241 3.51525 7.46208C3.72622 7.39176 3.90063 7.2405 4.00008 7.04159C4.52691 5.97769 5.32828 5.07377 6.32137 4.42324C7.31447 3.77272 8.46327 3.39919 9.64904 3.34125C10.8348 3.28331 12.0146 3.54307 13.0663 4.09368C14.1181 4.64429 15.0038 5.46578 15.6318 6.47325C16.2599 7.48072 16.6075 8.63763 16.6387 9.82441C16.67 11.0112 16.3838 12.1848 15.8097 13.2239C15.2356 14.2631 14.3944 15.13 13.373 15.7353C12.3517 16.3405 11.1873 16.662 10.0001 16.6666C8.75748 16.672 7.53854 16.3269 6.48316 15.671C5.42777 15.015 4.57871 14.0748 4.03341 12.9583C3.93396 12.7593 3.75956 12.6081 3.54858 12.5378C3.3376 12.4674 3.10733 12.4838 2.90841 12.5833C2.7095 12.6827 2.55825 12.8571 2.48792 13.0681C2.41759 13.2791 2.43396 13.5093 2.53341 13.7083C3.1941 15.0378 4.19802 16.1668 5.44131 16.9783C6.6846 17.7898 8.12212 18.2544 9.60518 18.3241C11.0882 18.3937 12.563 18.0659 13.8769 17.3745C15.1908 16.6831 16.2961 15.6532 17.0785 14.3914C17.8609 13.1296 18.292 11.6817 18.3272 10.1974C18.3624 8.71314 18.0004 7.24641 17.2786 5.94895C16.5569 4.65148 15.5016 3.57039 14.222 2.81751C12.9423 2.06462 11.4848 1.66728 10.0001 1.66659Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default SignOut;

packages/console/src/icons/Spinner.tsx

@@ -1,19 +0,0 @@
-import React, { SVGProps } from 'react';
-
-const Spinner = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M9.33566 14.8714C9.44104 15.4135 9.08652 15.9451 8.53547 15.9821C7.4048 16.0579 6.2669 15.8929 5.19834 15.4934C3.81639 14.9767 2.60425 14.0879 1.69591 12.9253C0.78758 11.7627 0.218443 10.3715 0.0514252 8.90563C-0.115592 7.43973 0.126015 5.9562 0.749537 4.61905C1.37306 3.28191 2.35421 2.14323 3.5845 1.32891C4.8148 0.514598 6.24632 0.0563637 7.7208 0.00487344C9.19528 -0.0466168 10.6553 0.310643 11.9394 1.03715C12.9323 1.59891 13.7901 2.36452 14.4588 3.27942C14.7847 3.72531 14.6054 4.33858 14.1223 4.60633C13.6393 4.87408 13.0366 4.69278 12.6924 4.26086C12.2154 3.66218 11.6262 3.15785 10.9545 2.77787C9.99146 2.23298 8.89646 1.96504 7.7906 2.00366C6.68474 2.04227 5.6111 2.38595 4.68838 2.99669C3.76565 3.60742 3.02979 4.46143 2.56215 5.46429C2.09451 6.46715 1.91331 7.5798 2.03857 8.67922C2.16383 9.77864 2.59069 10.822 3.27194 11.694C3.95319 12.5659 4.8623 13.2325 5.89876 13.62C6.62154 13.8903 7.38663 14.0175 8.15188 13.9981C8.70399 13.9841 9.23028 14.3293 9.33566 14.8714Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export default Spinner;

packages/console/src/scss/details.module.scss

@@ -18,7 +18,6 @@
   }
 
   .footer {
-    text-align: right;
     position: sticky;
     bottom: 0;
     margin: 0 _.unit(-6);
@@ -27,6 +26,8 @@
     background: var(--color-base);
 
     .footerMain {
+      display: flex;
+      justify-content: flex-end;
       border-bottom-left-radius: 16px;
       border-bottom-right-radius: 16px;
       background: var(--color-layer-1);

packages/phrases/src/locales/en.ts

@@ -96,6 +96,8 @@ const translation = {
   },
   admin_console: {
     title: 'Admin Console',
+    sign_out: 'Sign out',
+    profile: 'Profile',
     copy: {
       pending: 'Copy',
       copying: 'Copying',

packages/phrases/src/locales/zh-cn.ts

@@ -96,6 +96,8 @@ const translation = {
   },
   admin_console: {
     title: '管理面板',
+    sign_out: '登出',
+    profile: '账户管理',
     copy: {
       pending: '拷贝',
       copying: '拷贝中',

pnpm-lock.yaml

@@ -633,7 +633,7 @@ importers:
     specifiers:
       '@fontsource/roboto-mono': ^4.5.7
       '@logto/phrases': ^0.1.0
-      '@logto/react': ^0.1.11
+      '@logto/react': ^0.1.12
       '@logto/schemas': ^0.1.0
       '@logto/shared': ^0.1.0
       '@mdx-js/react': ^1.6.22
@@ -689,7 +689,7 @@ importers:
     devDependencies:
       '@fontsource/roboto-mono': 4.5.7
       '@logto/phrases': link:../phrases
-      '@logto/react': 0.1.11_react@17.0.2
+      '@logto/react': 0.1.12_react@17.0.2
       '@logto/schemas': link:../schemas
       '@logto/shared': link:../shared
       '@mdx-js/react': 1.6.22_react@17.0.2
@@ -921,7 +921,7 @@ importers:
       stylelint: ^14.8.2
       typescript: ^4.7.2
     devDependencies:
-      '@logto/react': 0.1.11_react@17.0.2
+      '@logto/react': 0.1.12_react@17.0.2
       '@logto/schemas': link:../schemas
       '@logto/shared': link:../shared
       '@parcel/core': 2.5.0
@@ -4625,7 +4625,6 @@ packages:
       pacote: 13.4.1
       semver: 7.3.7
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -4656,7 +4655,6 @@ packages:
       p-waterfall: 2.1.1
       semver: 7.3.7
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -4797,7 +4795,6 @@ packages:
       whatwg-url: 8.7.0
       yargs-parser: 20.2.4
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -4995,7 +4992,6 @@ packages:
       npm-registry-fetch: 9.0.0
       npmlog: 4.1.2
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -5025,7 +5021,6 @@ packages:
       pify: 5.0.0
       read-package-json: 3.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -5064,7 +5059,6 @@ packages:
       npmlog: 4.1.2
       tar: 6.1.11
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -5163,7 +5157,6 @@ packages:
       pacote: 13.4.1
       semver: 7.3.7
     transitivePeerDependencies:
-      - bluebird
       - encoding
       - supports-color
     dev: true
@@ -5209,7 +5202,6 @@ packages:
       '@npmcli/run-script': 3.0.2
       npmlog: 4.1.2
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -5311,7 +5303,6 @@ packages:
       slash: 3.0.0
       write-json-file: 4.3.0
     transitivePeerDependencies:
-      - bluebird
       - encoding
       - supports-color
     dev: true
@@ -5358,8 +5349,8 @@ packages:
       superstruct: 0.15.4
     dev: true
 
-  /@logto/react/0.1.11_react@17.0.2:
-    resolution: {integrity: sha512-iu4weOF300A5A+6/O1bnHkq4VUTi1vkRiHb+XSgVhs4xE2Hd3uE4tfT7PqWQbBZW1KJktiGFgR8pOGwfDnVgLw==}
+  /@logto/react/0.1.12_react@17.0.2:
+    resolution: {integrity: sha512-Bo6qlAm5JHeNofKdfzsMd+FtIvwmONqORjMUnN1Fv8qvs9/mHGD+0fsM4dAHj2cV5FdDRARhDjXwBeg3CMvrBQ==}
     requiresBuild: true
     peerDependencies:
       react: '>=16.8.0'
@@ -5495,7 +5486,6 @@ packages:
       treeverse: 2.0.0
       walk-up-path: 1.0.0
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -5531,8 +5521,6 @@ packages:
       promise-retry: 2.0.1
       semver: 7.3.7
       which: 2.0.2
-    transitivePeerDependencies:
-      - bluebird
     dev: true
 
   /@npmcli/installed-package-contents/1.0.7:
@@ -5563,7 +5551,6 @@ packages:
       pacote: 13.4.1
       semver: 7.3.7
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -5615,7 +5602,6 @@ packages:
       node-gyp: 9.0.0
       read-package-json-fast: 2.0.3
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -6671,7 +6657,6 @@ packages:
       stylelint-config-xo-scss: 0.15.0_cazrl3eatzhkw4y7xb6glndqh4
     transitivePeerDependencies:
       - eslint
-      - eslint-import-resolver-webpack
       - postcss
       - prettier
       - supports-color
@@ -6691,7 +6676,6 @@ packages:
       stylelint-config-xo-scss: 0.15.0_zhymizk4kfitko2u2d4p3qwyee
     transitivePeerDependencies:
       - eslint
-      - eslint-import-resolver-webpack
       - postcss
       - prettier
       - supports-color
@@ -6711,7 +6695,6 @@ packages:
       stylelint-config-xo-scss: 0.15.0_cazrl3eatzhkw4y7xb6glndqh4
     transitivePeerDependencies:
       - eslint
-      - eslint-import-resolver-webpack
       - postcss
       - prettier
       - supports-color
@@ -6735,7 +6718,7 @@ packages:
       eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
       eslint-plugin-consistent-default-export-name: 0.0.7
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
       eslint-plugin-no-use-extend-native: 0.5.0
       eslint-plugin-node: 11.1.0_eslint@8.10.0
       eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m
@@ -6745,7 +6728,6 @@ packages:
       pkg-dir: 4.2.0
       prettier: 2.5.1
     transitivePeerDependencies:
-      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
@@ -6767,7 +6749,7 @@ packages:
       eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
       eslint-plugin-consistent-default-export-name: 0.0.7
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
       eslint-plugin-no-use-extend-native: 0.5.0
       eslint-plugin-node: 11.1.0_eslint@8.10.0
       eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m
@@ -6777,7 +6759,6 @@ packages:
       pkg-dir: 4.2.0
       prettier: 2.5.1
     transitivePeerDependencies:
-      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
@@ -6799,7 +6780,7 @@ packages:
       eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
       eslint-plugin-consistent-default-export-name: 0.0.7
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
       eslint-plugin-no-use-extend-native: 0.5.0
       eslint-plugin-node: 11.1.0_eslint@8.10.0
       eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m
@@ -6809,7 +6790,6 @@ packages:
       pkg-dir: 4.2.0
       prettier: 2.5.1
     transitivePeerDependencies:
-      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
@@ -6831,7 +6811,7 @@ packages:
       eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
       eslint-plugin-consistent-default-export-name: 0.0.7
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
       eslint-plugin-no-use-extend-native: 0.5.0
       eslint-plugin-node: 11.1.0_eslint@8.10.0
       eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m
@@ -6841,7 +6821,6 @@ packages:
       pkg-dir: 4.2.0
       prettier: 2.5.1
     transitivePeerDependencies:
-      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
@@ -9039,8 +9018,6 @@ packages:
       qs: 6.9.7
       raw-body: 2.4.3
       type-is: 1.6.18
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /bonjour-service/1.0.11:
@@ -9235,8 +9212,6 @@ packages:
       ssri: 8.0.1
       tar: 6.1.11
       unique-filename: 1.1.1
-    transitivePeerDependencies:
-      - bluebird
     dev: true
 
   /cacache/16.1.0:
@@ -9261,8 +9236,6 @@ packages:
       ssri: 9.0.1
       tar: 6.1.11
       unique-filename: 1.1.1
-    transitivePeerDependencies:
-      - bluebird
     dev: true
 
   /cache-content-type/1.0.1:
@@ -9790,8 +9763,6 @@ packages:
       on-headers: 1.0.2
       safe-buffer: 5.1.2
       vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /concat-map/0.0.1:
@@ -10416,22 +10387,12 @@ packages:
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.0.0
     dev: true
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.1.3
 
@@ -10659,8 +10620,6 @@ packages:
     dependencies:
       address: 1.1.2
       debug: 2.6.9
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /detect-port/1.3.0:
@@ -10670,8 +10629,6 @@ packages:
     dependencies:
       address: 1.1.2
       debug: 2.6.9
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /dezalgo/1.0.3:
@@ -11200,7 +11157,7 @@ packages:
     dependencies:
       debug: 4.3.3
       eslint: 8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
       glob: 7.2.0
       is-glob: 4.0.3
       resolve: 1.22.0
@@ -11209,31 +11166,12 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils/2.7.3_l62aq42yiamaj3cnpuf6avthf4:
+  /eslint-module-utils/2.7.3:
     resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
     engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.14.0_fo4uz55zgcu432252zy2gvpvcu
       debug: 3.2.7
-      eslint-import-resolver-node: 0.3.6
-      eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
       find-up: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /eslint-plugin-consistent-default-export-name/0.0.7:
@@ -11268,24 +11206,19 @@ packages:
       ignore: 5.2.0
     dev: true
 
-  /eslint-plugin-import/2.25.4_sidoke6kqbkbdht6nlmwbfnany:
+  /eslint-plugin-import/2.25.4_eslint@8.10.0:
     resolution: {integrity: sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==}
     engines: {node: '>=4'}
     peerDependencies:
-      '@typescript-eslint/parser': '*'
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.14.0_fo4uz55zgcu432252zy2gvpvcu
       array-includes: 3.1.4
       array.prototype.flat: 1.2.5
       debug: 2.6.9
       doctrine: 2.1.0
       eslint: 8.10.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3_l62aq42yiamaj3cnpuf6avthf4
+      eslint-module-utils: 2.7.3
       has: 1.0.3
       is-core-module: 2.8.1
       is-glob: 4.0.3
@@ -11293,10 +11226,6 @@ packages:
       object.values: 1.1.5
       resolve: 1.22.0
       tsconfig-paths: 3.13.0
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
     dev: true
 
   /eslint-plugin-no-use-extend-native/0.5.0:
@@ -11688,8 +11617,6 @@ packages:
       type-is: 1.6.18
       utils-merge: 1.0.1
       vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /extend-shallow/2.0.1:
@@ -11881,8 +11808,6 @@ packages:
       parseurl: 1.3.3
       statuses: 1.5.0
       unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /find-cache-dir/3.3.2:
@@ -14654,7 +14579,6 @@ packages:
       import-local: 3.1.0
       npmlog: 4.1.2
     transitivePeerDependencies:
-      - bluebird
       - encoding
       - supports-color
     dev: true
@@ -14689,7 +14613,6 @@ packages:
       npm-package-arg: 8.1.5
       npm-registry-fetch: 11.0.0
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -14703,7 +14626,6 @@ packages:
       semver: 7.3.7
       ssri: 8.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -14886,7 +14808,7 @@ packages:
     dev: true
 
   /lodash.get/4.4.2:
-    resolution: {integrity: sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=}
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     dev: true
 
   /lodash.ismatch/4.4.0:
@@ -14909,7 +14831,7 @@ packages:
     dev: true
 
   /lodash.once/4.1.1:
-    resolution: {integrity: sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=}
+    resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
     dev: true
 
   /lodash.orderby/4.6.0:
@@ -15078,7 +15000,6 @@ packages:
       socks-proxy-agent: 6.1.1
       ssri: 9.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -15102,7 +15023,6 @@ packages:
       socks-proxy-agent: 5.0.1
       ssri: 8.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -15127,7 +15047,6 @@ packages:
       socks-proxy-agent: 6.1.1
       ssri: 8.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -16021,7 +15940,6 @@ packages:
       tar: 6.1.11
       which: 2.0.2
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -16197,7 +16115,6 @@ packages:
       minizlib: 2.1.2
       npm-package-arg: 8.1.5
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -16213,7 +16130,6 @@ packages:
       npm-package-arg: 9.0.2
       proc-log: 2.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -16230,7 +16146,6 @@ packages:
       minizlib: 2.1.2
       npm-package-arg: 8.1.5
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -16656,7 +16571,6 @@ packages:
       ssri: 9.0.1
       tar: 6.1.11
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -17832,11 +17746,6 @@ packages:
 
   /promise-inflight/1.0.1:
     resolution: {integrity: sha1-mEcocL8igTL8vdhoEputEsPAKeM=}
-    peerDependencies:
-      bluebird: '*'
-    peerDependenciesMeta:
-      bluebird:
-        optional: true
     dev: true
 
   /promise-retry/2.0.1:
@@ -18109,7 +18018,6 @@ packages:
       text-table: 0.2.0
     transitivePeerDependencies:
       - eslint
-      - supports-color
       - typescript
       - vue-template-compiler
       - webpack
@@ -19217,8 +19125,6 @@ packages:
       on-finished: 2.3.0
       range-parser: 1.2.1
       statuses: 1.5.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /serialize-error/7.0.1:
@@ -19265,8 +19171,6 @@ packages:
       http-errors: 1.6.3
       mime-types: 2.1.35
       parseurl: 1.3.3
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /serve-static/1.14.2:
@@ -19277,8 +19181,6 @@ packages:
       escape-html: 1.0.3
       parseurl: 1.3.3
       send: 0.17.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /set-blocking/2.0.0: