chore: move client folders (#948)

apps/web/src/components/quick-search/Footer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { AddIcon } from '@blocksuite/icons';
+import { StyledModalFooterContent } from './style';
+import { Command } from 'cmdk';
+import { usePageHelper } from '@/hooks/use-page-helper';
+import { useTranslation } from '@affine/i18n';
+export const Footer = (props: { query: string; onClose: () => void }) => {
+  const { openPage, createPage } = usePageHelper();
+  const { t } = useTranslation();
+  const { query, onClose } = props;
+
+  return (
+    <Command.Item
+      data-testid="quickSearch-addNewPage"
+      onSelect={async () => {
+        onClose();
+        const pageId = await createPage({ title: query });
+        if (pageId) {
+          openPage(pageId);
+        }
+      }}
+    >
+      <StyledModalFooterContent>
+        <AddIcon />
+        {query ? (
+          <span>{t('New Keyword Page', { query: query })}</span>
+        ) : (
+          <span>{t('New Page')}</span>
+        )}
+      </StyledModalFooterContent>
+    </Command.Item>
+  );
+};

apps/web/src/components/quick-search/Input.tsx

@@ -0,0 +1,99 @@
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { SearchIcon } from '@blocksuite/icons';
+import { StyledInputContent, StyledLabel } from './style';
+import { Command } from 'cmdk';
+import { useTranslation } from '@affine/i18n';
+export const Input = (props: {
+  open: boolean;
+  query: string;
+  setQuery: Dispatch<SetStateAction<string>>;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+  isPublic: boolean;
+  publishWorkspaceName: string | undefined;
+}) => {
+  const { open, query, setQuery, setLoading, isPublic, publishWorkspaceName } =
+    props;
+  const [isComposition, setIsComposition] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation();
+  useEffect(() => {
+    if (open) {
+      const inputElement = inputRef.current;
+      return inputElement?.focus();
+    }
+  }, [open]);
+  useEffect(() => {
+    const inputElement = inputRef.current;
+    if (!open) {
+      return;
+    }
+    const handleFocus = () => {
+      inputElement?.focus();
+    };
+    inputElement?.addEventListener('blur', handleFocus, true);
+    return () => inputElement?.removeEventListener('blur', handleFocus, true);
+  }, [inputRef, open]);
+  useEffect(() => {
+    setInputValue(query);
+  }, [query]);
+  return (
+    <StyledInputContent>
+      <StyledLabel htmlFor=":r5:">
+        <SearchIcon />
+      </StyledLabel>
+      <Command.Input
+        ref={inputRef}
+        value={inputValue}
+        onCompositionStart={() => {
+          setIsComposition(true);
+        }}
+        onCompositionEnd={e => {
+          setQuery(e.data);
+          setIsComposition(false);
+          if (!query) {
+            setLoading(true);
+          }
+        }}
+        onValueChange={str => {
+          setInputValue(str);
+          if (!isComposition) {
+            setQuery(str);
+            if (!query) {
+              setLoading(true);
+            }
+          }
+        }}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (e.key === 'a' && e.metaKey) {
+            e.stopPropagation();
+            inputRef.current?.select();
+            return;
+          }
+          if (isComposition) {
+            if (
+              e.key === 'ArrowDown' ||
+              e.key === 'ArrowUp' ||
+              e.key === 'Enter'
+            ) {
+              e.stopPropagation();
+            }
+          }
+        }}
+        placeholder={
+          isPublic
+            ? t('Quick search placeholder2', {
+                workspace: publishWorkspaceName,
+              })
+            : t('Quick search placeholder')
+        }
+      />
+    </StyledInputContent>
+  );
+};

apps/web/src/components/quick-search/PublishedResults.tsx

@@ -0,0 +1,95 @@
+import { Command } from 'cmdk';
+import { StyledListItem, StyledNotFound } from './style';
+import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useAppState, PageMeta } from '@/providers/app-state-provider';
+import { useRouter } from 'next/router';
+import { NoResultSVG } from './NoResultSVG';
+import { useTranslation } from '@affine/i18n';
+import usePageHelper from '@/hooks/use-page-helper';
+import { Workspace } from '@blocksuite/store';
+
+export const PublishedResults = (props: {
+  query: string;
+  loading: boolean;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+  setPublishWorkspaceName: Dispatch<SetStateAction<string>>;
+  onClose: () => void;
+}) => {
+  const [workspace, setWorkspace] = useState<Workspace>();
+  const { query, loading, setLoading, onClose, setPublishWorkspaceName } =
+    props;
+  const { search } = usePageHelper();
+  const [results, setResults] = useState(new Map<string, string | undefined>());
+  const { dataCenter } = useAppState();
+  const router = useRouter();
+  const [pageList, setPageList] = useState<PageMeta[]>([]);
+  useEffect(() => {
+    dataCenter
+      .loadPublicWorkspace(router.query.workspaceId as string)
+      .then(data => {
+        setPageList(data.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]);
+        if (data.blocksuiteWorkspace) {
+          setWorkspace(data.blocksuiteWorkspace);
+          setPublishWorkspaceName(data.blocksuiteWorkspace.meta.name);
+        }
+      })
+      .catch(() => {
+        router.push('/404');
+      });
+  }, [router, dataCenter, setPublishWorkspaceName]);
+  const { t } = useTranslation();
+  useEffect(() => {
+    setResults(search(query, workspace));
+    setLoading(false);
+    //Save the Map<BlockId, PageId> obtained from the search as state
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, setResults, setLoading]);
+  const pageIds = [...results.values()];
+  const resultsPageMeta = pageList.filter(
+    page => pageIds.indexOf(page.id) > -1 && !page.trash
+  );
+
+  return loading ? null : (
+    <>
+      {query ? (
+        resultsPageMeta.length ? (
+          <Command.Group
+            heading={t('Find results', { number: resultsPageMeta.length })}
+          >
+            {resultsPageMeta.map(result => {
+              return (
+                <Command.Item
+                  key={result.id}
+                  onSelect={() => {
+                    router.push(
+                      `/public-workspace/${router.query.workspaceId}/${result.id}`
+                    );
+                    onClose();
+                  }}
+                  value={result.id}
+                >
+                  <StyledListItem>
+                    {result.mode === 'edgeless' ? (
+                      <EdgelessIcon />
+                    ) : (
+                      <PaperIcon />
+                    )}
+                    <span>{result.title}</span>
+                  </StyledListItem>
+                </Command.Item>
+              );
+            })}
+          </Command.Group>
+        ) : (
+          <StyledNotFound>
+            <span>{t('Find 0 result')}</span>
+            <NoResultSVG />
+          </StyledNotFound>
+        )
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};

apps/web/src/components/quick-search/Results.tsx

@@ -0,0 +1,100 @@
+import { Command } from 'cmdk';
+import { StyledListItem, StyledNotFound } from './style';
+import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useAppState } from '@/providers/app-state-provider';
+import { useRouter } from 'next/router';
+import { useSwitchToConfig } from './config';
+import { NoResultSVG } from './NoResultSVG';
+import { useTranslation } from '@affine/i18n';
+import usePageHelper from '@/hooks/use-page-helper';
+export const Results = (props: {
+  query: string;
+  loading: boolean;
+  onClose: () => void;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+  setShowCreatePage: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const { query, loading, setLoading, setShowCreatePage, onClose } = props;
+  const { openPage } = usePageHelper();
+  const router = useRouter();
+  const { currentWorkspace, pageList } = useAppState();
+  const { search } = usePageHelper();
+  const List = useSwitchToConfig(currentWorkspace?.id);
+  const [results, setResults] = useState(new Map<string, string | undefined>());
+  const { t } = useTranslation();
+  useEffect(() => {
+    setResults(search(query));
+    setLoading(false);
+    //Save the Map<BlockId, PageId> obtained from the search as state
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, setResults, setLoading]);
+  const pageIds = [...results.values()];
+
+  const resultsPageMeta = pageList.filter(
+    page => pageIds.indexOf(page.id) > -1 && !page.trash
+  );
+
+  useEffect(() => {
+    setShowCreatePage(!resultsPageMeta.length);
+    //Determine whether to display the  ‘+ New page’
+  }, [resultsPageMeta, setShowCreatePage]);
+  return loading ? null : (
+    <>
+      {query ? (
+        resultsPageMeta.length ? (
+          <Command.Group
+            heading={t('Find results', { number: resultsPageMeta.length })}
+          >
+            {resultsPageMeta.map(result => {
+              return (
+                <Command.Item
+                  key={result.id}
+                  onSelect={() => {
+                    onClose();
+                    openPage(result.id);
+                  }}
+                  value={result.id}
+                >
+                  <StyledListItem>
+                    {result.mode === 'edgeless' ? (
+                      <EdgelessIcon />
+                    ) : (
+                      <PaperIcon />
+                    )}
+                    <span>{result.title}</span>
+                  </StyledListItem>
+                </Command.Item>
+              );
+            })}
+          </Command.Group>
+        ) : (
+          <StyledNotFound>
+            <span>{t('Find 0 result')}</span>
+            <NoResultSVG />
+          </StyledNotFound>
+        )
+      ) : (
+        <Command.Group heading={t('Jump to')}>
+          {List.map(link => {
+            return (
+              <Command.Item
+                key={link.title}
+                value={link.title}
+                onSelect={() => {
+                  onClose();
+                  router.push(link.href);
+                }}
+              >
+                <StyledListItem>
+                  <link.icon />
+                  <span>{link.title}</span>
+                </StyledListItem>
+              </Command.Item>
+            );
+          })}
+        </Command.Group>
+      )}
+    </>
+  );
+};

apps/web/src/components/quick-search/config.ts

@@ -0,0 +1,44 @@
+import { FC, SVGProps } from 'react';
+import {
+  AllPagesIcon,
+  FavouritesIcon,
+  TrashIcon,
+  SettingsIcon,
+} from '@blocksuite/icons';
+import { useTranslation } from '@affine/i18n';
+
+export const useSwitchToConfig = (
+  currentWorkspaceId?: string
+): {
+  title: string;
+  href: string;
+  icon: FC<SVGProps<SVGSVGElement>>;
+}[] => {
+  const { t } = useTranslation();
+  return [
+    {
+      title: t('All pages'),
+      href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
+      icon: AllPagesIcon,
+    },
+    {
+      title: t('Favorites'),
+      href: currentWorkspaceId
+        ? `/workspace/${currentWorkspaceId}/favorite`
+        : '',
+      icon: FavouritesIcon,
+    },
+    {
+      title: t('Settings'),
+      href: currentWorkspaceId
+        ? `/workspace/${currentWorkspaceId}/setting`
+        : '',
+      icon: SettingsIcon,
+    },
+    {
+      title: t('Trash'),
+      href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
+      icon: TrashIcon,
+    },
+  ];
+};

apps/web/src/components/quick-search/index.tsx

@@ -0,0 +1,160 @@
+import { Modal, ModalWrapper } from '@affine/component';
+import {
+  StyledContent,
+  StyledModalHeader,
+  StyledModalFooter,
+  StyledModalDivider,
+  StyledShortcut,
+} from './style';
+import { Input } from './Input';
+import { Results } from './Results';
+import { Footer } from './Footer';
+import { Command } from 'cmdk';
+import { useEffect, useState } from 'react';
+import { useModal } from '@/store/globalModal';
+import { getUaHelper } from '@/utils';
+import { useRouter } from 'next/router';
+import { PublishedResults } from './PublishedResults';
+type TransitionsModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+const isMac = () => {
+  return getUaHelper().isMacOs;
+};
+export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
+  const router = useRouter();
+  const [query, setQuery] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [isPublic, setIsPublic] = useState(false);
+  const [publishWorkspaceName, setPublishWorkspaceName] = useState('');
+  const [showCreatePage, setShowCreatePage] = useState(true);
+  const { triggerQuickSearchModal } = useModal();
+  const isPublicAndNoQuery = () => {
+    return isPublic && query.length === 0;
+  };
+  const handleClose = () => {
+    setQuery('');
+    onClose();
+  };
+  // Add  ‘⌘+K’ shortcut keys as switches
+  useEffect(() => {
+    if (router.pathname.startsWith('/404')) {
+      return;
+    }
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) {
+        const selection = window.getSelection();
+        setQuery('');
+        if (selection?.toString()) {
+          triggerQuickSearchModal(false);
+          return;
+        }
+        if (selection?.isCollapsed) {
+          triggerQuickSearchModal(!open);
+        }
+      }
+    };
+    document.addEventListener('keydown', down, { capture: true });
+    return () =>
+      document.removeEventListener('keydown', down, { capture: true });
+  }, [open, router, triggerQuickSearchModal]);
+
+  useEffect(() => {
+    if (router.pathname.startsWith('/public-workspace')) {
+      return setIsPublic(true);
+    } else {
+      return setIsPublic(false);
+    }
+  }, [router]);
+  useEffect(() => {
+    if (router.pathname.startsWith('/404')) {
+      return onClose();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      wrapperPosition={['top', 'center']}
+      data-testid="quickSearch"
+    >
+      <ModalWrapper
+        width={620}
+        style={{
+          maxHeight: '80vh',
+          minHeight: isPublicAndNoQuery() ? '72px' : '350px',
+          top: '12vh',
+        }}
+      >
+        <Command
+          shouldFilter={false}
+          //Handle KeyboardEvent conflicts with blocksuite
+          onKeyDown={(e: React.KeyboardEvent) => {
+            if (
+              e.key === 'ArrowDown' ||
+              e.key === 'ArrowUp' ||
+              e.key === 'ArrowLeft' ||
+              e.key === 'ArrowRight'
+            ) {
+              e.stopPropagation();
+            }
+          }}
+        >
+          <StyledModalHeader>
+            <Input
+              open={open}
+              query={query}
+              setQuery={setQuery}
+              setLoading={setLoading}
+              isPublic={isPublic}
+              publishWorkspaceName={publishWorkspaceName}
+            />
+            <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
+          </StyledModalHeader>
+          <StyledModalDivider
+            style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+          />
+          <Command.List>
+            <StyledContent
+              style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+            >
+              {!isPublic ? (
+                <Results
+                  query={query}
+                  loading={loading}
+                  setLoading={setLoading}
+                  onClose={handleClose}
+                  setShowCreatePage={setShowCreatePage}
+                />
+              ) : (
+                <PublishedResults
+                  query={query}
+                  loading={loading}
+                  setLoading={setLoading}
+                  onClose={handleClose}
+                  setPublishWorkspaceName={setPublishWorkspaceName}
+                  data-testid="publishedSearchResults"
+                />
+              )}
+            </StyledContent>
+            {!isPublic ? (
+              showCreatePage ? (
+                <>
+                  <StyledModalDivider />
+                  <StyledModalFooter>
+                    <Footer query={query} onClose={handleClose} />
+                  </StyledModalFooter>
+                </>
+              ) : null
+            ) : null}
+          </Command.List>
+        </Command>
+      </ModalWrapper>
+    </Modal>
+  );
+};
+
+export default QuickSearch;

apps/web/src/components/quick-search/style.ts

@@ -0,0 +1,158 @@
+import { displayFlex, styled } from '@affine/component';
+
+export const StyledContent = styled('div')(({ theme }) => {
+  return {
+    minHeight: '220px',
+    maxHeight: '55vh',
+    width: '100%',
+    overflow: 'auto',
+    marginBottom: '10px',
+    ...displayFlex('center', 'flex-start'),
+    color: theme.colors.popoverColor,
+    transition: 'all 0.15s',
+    letterSpacing: '0.06em',
+    '[cmdk-group-heading]': {
+      margin: '5px 16px',
+      fontSize: theme.font.base,
+      fontWeight: '500',
+    },
+    '[aria-selected="true"]': {
+      borderRadius: '5px',
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});
+export const StyledJumpTo = styled('div')(({ theme }) => {
+  return {
+    ...displayFlex('center', 'start'),
+    flexDirection: 'column',
+    padding: '10px 10px 10px 0',
+    fontSize: theme.font.base,
+    strong: {
+      fontWeight: '500',
+      marginBottom: '10px',
+    },
+  };
+});
+export const StyledNotFound = styled('div')(({ theme }) => {
+  return {
+    width: '612px',
+    ...displayFlex('center', 'center'),
+    flexDirection: 'column',
+    padding: '5px 16px',
+    fontSize: theme.font.base,
+    span: {
+      width: '100%',
+      fontWeight: '500',
+    },
+
+    '>svg': {
+      marginTop: '10px',
+      fontSize: '150px',
+    },
+  };
+});
+export const StyledInputContent = styled('div')(({ theme }) => {
+  return {
+    margin: '13px 0',
+    ...displayFlex('space-between', 'center'),
+    input: {
+      width: '492px',
+      height: '22px',
+      padding: '0 12px',
+      fontSize: theme.font.base,
+      ...displayFlex('space-between', 'center'),
+      letterSpacing: '0.06em',
+      color: theme.colors.popoverColor,
+
+      '::placeholder': {
+        color: theme.colors.placeHolderColor,
+      },
+    },
+  };
+});
+export const StyledShortcut = styled('div')(({ theme }) => {
+  return {
+    color: theme.colors.placeHolderColor,
+    fontSize: theme.font.base,
+    whiteSpace: 'nowrap',
+  };
+});
+
+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 16px 6.5px 16px',
+    position: 'relative',
+    borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
+    transition: 'all 0.15s',
+  };
+});
+
+export const StyledModalFooter = styled('div')(({ theme }) => {
+  return {
+    fontSize: theme.font.base,
+    lineHeight: '22px',
+    marginBottom: '8px',
+    textAlign: 'center',
+    ...displayFlex('center', 'center'),
+    color: theme.colors.popoverColor,
+    '[aria-selected="true"]': {
+      transition: 'background .15s, color .15s',
+      borderRadius: '5px',
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});
+export const StyledModalFooterContent = styled.button(({ theme }) => {
+  return {
+    width: '612px',
+    height: '32px',
+    fontSize: theme.font.base,
+    lineHeight: '22px',
+    textAlign: 'center',
+    ...displayFlex('center', 'center'),
+    color: 'inherit',
+    borderRadius: '5px',
+    transition: 'background .15s, color .15s',
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+  };
+});
+export const StyledListItem = styled.button(({ theme }) => {
+  return {
+    width: '612px',
+    height: '32px',
+    fontSize: theme.font.base,
+    color: 'inherit',
+    paddingLeft: '12px',
+    borderRadius: '5px',
+    transition: 'background .15s, color .15s',
+    ...displayFlex('flex-start', 'center'),
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+  };
+});