Merge pull request #548 from JimmFly/feat/quick-search

feat: quick search

packages/app/package.json

@@ -23,6 +23,7 @@
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.8.6",
     "@toeverything/pathfinder-logger": "workspace:@pathfinder/logger@*",
+    "cmdk": "^0.1.20",
     "css-spring": "^4.1.0",
     "lit": "^2.3.1",
     "next": "13.0.1",

packages/app/src/components/faq/index.tsx

@@ -16,7 +16,7 @@ export const FAQ = () => {
   const [showContent, setShowContent] = useState(false);
   const { mode } = useTheme();
   const { mode: editorMode } = useEditor();
-  const { shortcutsModalHandler, contactModalHandler } = useModal();
+  const { shortcutsModalHandler, triggerContactModal } = useModal();
   const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless';
 
   return (
@@ -38,7 +38,7 @@ export const FAQ = () => {
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
                   setShowContent(false);
-                  contactModalHandler(true);
+                  triggerContactModal(true);
                 }}
               >
                 <ContactIcon />

packages/app/src/components/header/page-header.tsx

@@ -2,7 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { StyledTitle, StyledTitleWrapper } from './styles';
 import { useEditor } from '@/providers/editor-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
-
+import { MiddleIconArrowDownSmallIcon } from '@blocksuite/icons';
+import { useModal } from '@/providers/global-modal-provider';
+import IconButton from '@/ui/button/icon-button';
 import Header from './header';
 
 export const PageHeader = () => {
@@ -10,7 +12,7 @@ export const PageHeader = () => {
   const [isHover, setIsHover] = useState(false);
 
   const { editor } = useEditor();
-
+  const { triggerQuickSearchModal } = useModal();
   useEffect(() => {
     if (editor?.model) {
       setTitle(editor.model.title ?? '');
@@ -38,6 +40,17 @@ export const PageHeader = () => {
             }}
           />
           <StyledTitleWrapper>{title}</StyledTitleWrapper>
+          <IconButton
+            style={{
+              marginLeft: '6px',
+            }}
+          >
+            <MiddleIconArrowDownSmallIcon
+              onClick={() => {
+                triggerQuickSearchModal(true);
+              }}
+            />
+          </IconButton>
         </StyledTitle>
       ) : null}
     </Header>

packages/app/src/components/quick-search/content/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useEditor } from '@/providers/editor-provider';
+import JumpTo from './jumpTo';
+
+const Result = () => {
+  const { editor, mode, setMode } = useEditor();
+  console.log(editor?.page);
+
+  return (
+    <div>
+      <JumpTo />
+    </div>
+  );
+};
+
+export default Result;

packages/app/src/components/quick-search/content/jumpTo.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  MiddleFavouritesIcon,
+  MiddleTrashIcon,
+  MiddleAllPagesIcon,
+} from '@blocksuite/icons';
+const JumpTo = () => {
+  return (
+    <div>
+      <div>Jump to</div>
+      <div>
+        <MiddleAllPagesIcon />
+        <span> All pages</span>
+      </div>
+      <div>
+        <MiddleFavouritesIcon />
+        <span> Favourites</span>
+      </div>
+      <div>
+        <MiddleTrashIcon />
+        <span> Trash</span>
+      </div>
+    </div>
+  );
+};
+
+export default JumpTo;

packages/app/src/components/quick-search/content/searchResult.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const SearchResult = () => {
+  return <div>searchResult</div>;
+};
+
+export default SearchResult;

packages/app/src/components/quick-search/footer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { MiddleAddIcon } from '@blocksuite/icons';
+import { StyledModalFooterContent } from './style';
+import { useEditor } from '@/providers/editor-provider';
+import { IconButton } from '@/ui/button';
+
+const QuickSearchFooter = () => {
+  const { createPage } = useEditor();
+  return (
+    <StyledModalFooterContent>
+      <IconButton>
+        <MiddleAddIcon
+          onClick={() => {
+            createPage();
+          }}
+        />
+      </IconButton>
+      <span>New page</span>
+    </StyledModalFooterContent>
+  );
+};
+
+export default QuickSearchFooter;

packages/app/src/components/quick-search/index.tsx

@@ -0,0 +1,50 @@
+import { Modal, ModalWrapper } from '@/ui/modal';
+
+import {
+  StyledModalWrapper,
+  StyledContent,
+  StyledModalHeader,
+  StyledModalFooter,
+  StyledModalDivider,
+  StyledShortcut,
+} from './style';
+import Input from './input';
+import Result from './content';
+import QuickSearchFooter from './footer';
+type TransitionsModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+const isMac = () => {
+  return /macintosh|mac os x/i.test(navigator.userAgent);
+};
+export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
+  return (
+    <Modal open={open} onClose={onClose}>
+      <ModalWrapper
+        width={620}
+        height={'auto'}
+        style={{
+          maxHeight: '720px',
+          minHeight: '350px',
+          borderRadius: '20px',
+        }}
+      >
+        <StyledModalHeader>
+          <Input />
+          <StyledShortcut>{isMac() ? '⌘+K' : 'Ctrl+K'}</StyledShortcut>
+        </StyledModalHeader>
+        <StyledModalDivider />
+        <StyledContent>
+          <Result />
+        </StyledContent>
+
+        <StyledModalFooter>
+          <QuickSearchFooter />
+        </StyledModalFooter>
+      </ModalWrapper>
+    </Modal>
+  );
+};
+
+export default QuickSearch;

packages/app/src/components/quick-search/input.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { MiddleSearchIcon } from '@blocksuite/icons';
+import { StyledInput, StyledInputContent, StyledLabel } from './style';
+
+const Input = () => {
+  return (
+    <StyledInputContent>
+      <StyledLabel htmlFor="quickSearchInput">
+        <MiddleSearchIcon />
+      </StyledLabel>
+      <StyledInput
+        id="quickSearchInput"
+        type="text"
+        placeholder="Quick search..."
+      />
+    </StyledInputContent>
+  );
+};
+
+export default Input;

packages/app/src/components/quick-search/style.ts

@@ -0,0 +1,98 @@
+import { displayFlex, styled } from '@/styles';
+import { relative } from 'path';
+
+export const StyledModalWrapper = styled('div')(({ theme }) => {
+  return {
+    width: '620px',
+    height: 'auto',
+    maxHeight: '720px',
+    minHeight: '350px',
+    backgroundColor: theme.colors.popoverBackground,
+    borderRadius: '20px',
+    position: 'absolute',
+    top: '138px',
+    margin: 'auto',
+  };
+});
+
+export const StyledContent = styled('div')(({ theme }) => {
+  return {
+    minHeight: '215px',
+    maxHeight: '585px',
+    width: '100%',
+    padding: '5px 24px',
+    overflow: 'auto',
+    color: theme.colors.popoverColor,
+    marginTop: '16px',
+    letterSpacing: '0.06em',
+  };
+});
+export const StyledInputContent = styled('div')({
+  margin: '13px 0',
+  ...displayFlex('space-between', 'center'),
+});
+export const StyledShortcut = styled('div')(({ theme }) => {
+  return { color: theme.colors.placeHolderColor, fontSize: theme.font.xs };
+});
+export const StyledInput = styled('input')(({ theme }) => {
+  return {
+    width: '492px',
+    height: '22px',
+    padding: '0 12px',
+    fontSize: theme.font.sm,
+    ...displayFlex('space-between', 'center'),
+    letterSpacing: '0.06em',
+    color: theme.colors.popoverColor,
+    '::placeholder': {
+      color: theme.colors.placeHolderColor,
+    },
+  };
+});
+export const StyledLabel = styled('label')(({ theme }) => {
+  return {
+    width: '24px',
+    height: '24px',
+    color: theme.colors.iconColor,
+  };
+});
+
+export const StyledModalHeader = styled('div')(({ theme }) => {
+  return {
+    height: '48px',
+    margin: '12px 24px 0px 24px',
+    ...displayFlex('space-between', 'center'),
+    color: theme.colors.popoverColor,
+  };
+});
+export const StyledModalDivider = styled('div')(({ theme }) => {
+  return {
+    width: 'auto',
+    height: '0',
+    margin: '6px 12px 6.5px 12px',
+    position: 'relative',
+    borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
+  };
+});
+
+export const StyledModalFooter = styled('div')(({ theme }) => {
+  return {
+    fontSize: theme.font.sm,
+    lineHeight: '20px',
+    textAlign: 'center',
+    color: theme.colors.popoverColor,
+    margin: '16px 0',
+  };
+});
+export const StyledModalFooterContent = styled('div')(({ theme }) => {
+  return {
+    fontSize: theme.font.sm,
+    lineHeight: '20px',
+    textAlign: 'center',
+    ...displayFlex('center', 'center'),
+    color: theme.colors.popoverColor,
+    margin: '16px 0',
+    span: {
+      marginLeft: '12px',
+    },
+  };
+});

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -10,15 +10,22 @@ import {
 import { Arrow } from './icons';
 import Link from 'next/link';
 import { useEditor } from '@/providers/editor-provider';
+import { useModal } from '@/providers/global-modal-provider';
 export const WorkSpaceSliderBar = () => {
+  const { triggerQuickSearchModal } = useModal();
   const [show, setShow] = useState(false);
   const { createPage } = useEditor();
   const router = useRouter();
   return (
     <>
       <StyledSliderBar show={show}>
-        <StyledListItem>Quick search</StyledListItem>
-
+        <StyledListItem
+          onClick={() => {
+            triggerQuickSearchModal(true);
+          }}
+        >
+          Quick search
+        </StyledListItem>
         <StyledListItem
           onClick={() => {
             router.push({

packages/app/src/providers/global-modal-provider.tsx

@@ -2,16 +2,18 @@ import { createContext, useContext, useState } from 'react';
 import type { PropsWithChildren } from 'react';
 import ShortcutsModal from '@/components/shortcuts-modal';
 import ContactModal from '@/components/contact-modal';
-
+import QuickSearch from '@/components/quick-search';
 type ModalContextValue = {
   shortcutsModalHandler: (visible: boolean) => void;
-  contactModalHandler: (visible: boolean) => void;
+  triggerContactModal: (visible: boolean) => void;
+  triggerQuickSearchModal: (visible: boolean) => void;
 };
 type ModalContextProps = PropsWithChildren<{}>;
 
 export const ModalContext = createContext<ModalContextValue>({
   shortcutsModalHandler: () => {},
-  contactModalHandler: () => {},
+  triggerContactModal: () => {},
+  triggerQuickSearchModal: () => {},
 });
 
 export const useModal = () => useContext(ModalContext);
@@ -21,6 +23,7 @@ export const ModalProvider = ({
 }: PropsWithChildren<ModalContextProps>) => {
   const [openContactModal, setOpenContactModal] = useState(false);
   const [openShortcutsModal, setOpenShortcutsModal] = useState(false);
+  const [openQuickSearchModal, setOpenQuickSearchModal] = useState(false);
 
   return (
     <ModalContext.Provider
@@ -28,9 +31,12 @@ export const ModalProvider = ({
         shortcutsModalHandler: visible => {
           setOpenShortcutsModal(visible);
         },
-        contactModalHandler: visible => {
+        triggerContactModal: visible => {
           setOpenContactModal(visible);
         },
+        triggerQuickSearchModal: visible => {
+          setOpenQuickSearchModal(visible);
+        },
       }}
     >
       <ContactModal
@@ -45,6 +51,12 @@ export const ModalProvider = ({
           setOpenShortcutsModal(false);
         }}
       ></ShortcutsModal>
+      <QuickSearch
+        open={openQuickSearchModal}
+        onClose={() => {
+          setOpenQuickSearchModal(false);
+        }}
+      ></QuickSearch>
       {children}
     </ModalContext.Provider>
   );

pnpm-lock.yaml

@@ -39,6 +39,7 @@ importers:
       '@types/node': 18.7.18
       '@types/react': 18.0.20
       '@types/react-dom': 18.0.6
+      cmdk: ^0.1.20
       css-spring: ^4.1.0
       eslint: 8.22.0
       eslint-config-next: 12.3.1
@@ -67,6 +68,7 @@ importers:
       '@mui/icons-material': 5.10.9_5fncb4nagb4cvvcnwamw2rozfa
       '@mui/material': 5.10.9_af5ln35zuaotaffazii6n6bke4
       '@toeverything/pathfinder-logger': link:../logger
+      cmdk: 0.1.20_7ey2zzynotv32rpkwno45fsx4e
       css-spring: 4.1.0
       lit: 2.4.0
       next: 13.0.1_biqbaboplfbrettd7655fr4n2y
@@ -890,6 +892,191 @@ packages:
     resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
     dev: false
 
+  /@radix-ui/primitive/1.0.0:
+    resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==}
+    dependencies:
+      '@babel/runtime': 7.19.0
+    dev: false
+
+  /@radix-ui/react-compose-refs/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-context/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-dialog/1.0.0_7ey2zzynotv32rpkwno45fsx4e:
+    resolution: {integrity: sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-dismissable-layer': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0
+      '@radix-ui/react-focus-scope': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-portal': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-slot': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      aria-hidden: 1.2.2_w5j4k42lgipnm43s3brx6h3c34
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-remove-scroll: 2.5.4_w5j4k42lgipnm43s3brx6h3c34
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
+  /@radix-ui/react-dismissable-layer/1.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-escape-keydown': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-focus-guards/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-focus-scope/1.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-id/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-portal/1.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-presence/1.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-primitive/1.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/react-slot': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
+  /@radix-ui/react-slot/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-controllable-state/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-escape-keydown/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-use-layout-effect/1.0.0_react@18.2.0:
+    resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      react: 18.2.0
+    dev: false
+
   /@rushstack/eslint-patch/1.2.0:
     resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
     dev: true
@@ -1125,6 +1312,21 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
+  /aria-hidden/1.2.2_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-6y/ogyDTk/7YAe91T3E2PR1ALVKyM2QbTio5HwM+N1Q6CMlCKhvClyIjkckBswa0f2xJhjsfzIGa1yVSe1UMVA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.9.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.20
+      react: 18.2.0
+      tslib: 2.4.0
+    dev: false
+
   /aria-query/4.2.2:
     resolution: {integrity: sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==}
     engines: {node: '>=6.0'}
@@ -1282,6 +1484,20 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /cmdk/0.1.20_7ey2zzynotv32rpkwno45fsx4e:
+    resolution: {integrity: sha512-b05kPE+9jmGRibOf2h34d1ybCFfYYOiwsyylDtvhI0ptDSJ/gbPDQSq6DySL4b74ZnK/JH/WVP3UPuAYXRPypg==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      '@radix-ui/react-dialog': 1.0.0_7ey2zzynotv32rpkwno45fsx4e
+      command-score: 0.1.2
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1303,6 +1519,10 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
+  /command-score/0.1.2:
+    resolution: {integrity: sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w==}
+    dev: false
+
   /concat-map/0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
     dev: true
@@ -1417,6 +1637,10 @@ packages:
       has-property-descriptors: 1.0.0
       object-keys: 1.1.1
 
+  /detect-node-es/1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    dev: false
+
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1647,7 +1871,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
+      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
       debug: 3.2.7
       eslint: 8.22.0
       eslint-import-resolver-node: 0.3.6
@@ -1666,7 +1890,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
+      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9
@@ -1988,6 +2212,11 @@ packages:
       has: 1.0.3
       has-symbols: 1.0.3
 
+  /get-nonce/1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /get-symbol-description/1.0.0:
     resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
     engines: {node: '>= 0.4'}
@@ -2161,6 +2390,12 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /invariant/2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /is-arguments/1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -2909,6 +3144,58 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-remove-scroll-bar/2.3.4_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.20
+      react: 18.2.0
+      react-style-singleton: 2.2.1_w5j4k42lgipnm43s3brx6h3c34
+      tslib: 2.4.0
+    dev: false
+
+  /react-remove-scroll/2.5.4_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.20
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.4_w5j4k42lgipnm43s3brx6h3c34
+      react-style-singleton: 2.2.1_w5j4k42lgipnm43s3brx6h3c34
+      tslib: 2.4.0
+      use-callback-ref: 1.3.0_w5j4k42lgipnm43s3brx6h3c34
+      use-sidecar: 1.1.2_w5j4k42lgipnm43s3brx6h3c34
+    dev: false
+
+  /react-style-singleton/2.2.1_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.20
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 18.2.0
+      tslib: 2.4.0
+    dev: false
+
   /react-transition-group/4.4.5_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -3321,6 +3608,37 @@ packages:
       punycode: 2.1.1
     dev: true
 
+  /use-callback-ref/1.3.0_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.20
+      react: 18.2.0
+      tslib: 2.4.0
+    dev: false
+
+  /use-sidecar/1.1.2_w5j4k42lgipnm43s3brx6h3c34:
+    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.0.20
+      detect-node-es: 1.1.0
+      react: 18.2.0
+      tslib: 2.4.0
+    dev: false
+
   /use-sync-external-store/1.2.0_react@18.2.0:
     resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
     peerDependencies: