diff --git a/packages/app/src/components/quick-search/config.ts b/packages/app/src/components/quick-search/config.ts
new file mode 100644
index 0000000000..4ff45b3de7
--- /dev/null
+++ b/packages/app/src/components/quick-search/config.ts
@@ -0,0 +1,18 @@
+import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
+export const List = [
+ {
+ title: 'All pages',
+ href: '/page-list/all',
+ icon: AllPagesIcon,
+ },
+ {
+ title: 'Favourites',
+ href: '/page-list/favorite',
+ icon: FavouritesIcon,
+ },
+ {
+ title: 'Trash',
+ href: '/page-list/trash',
+ icon: TrashIcon,
+ },
+];
diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx
index 2445c405ed..5a3dbfbefe 100644
--- a/packages/app/src/components/quick-search/footer.tsx
+++ b/packages/app/src/components/quick-search/footer.tsx
@@ -4,20 +4,27 @@ import { StyledModalFooterContent } from './style';
import { useEditor } from '@/providers/editor-provider';
import { useModal } from '@/providers/global-modal-provider';
-export const Footer = () => {
+export const Footer = (props: { query: string }) => {
const { createPage, getPageMeta, openPage } = useEditor();
const { triggerQuickSearchModal } = useModal();
+ const query = props.query;
+
return (
{
const page = createPage();
const pageMeta = getPageMeta((await page).id);
pageMeta && openPage(pageMeta.id);
+
triggerQuickSearchModal();
}}
>
- New page
+ {query ? (
+ New "{query}" page
+ ) : (
+ New page
+ )}
);
};
diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index 8ee045b2e9..90763967ad 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -21,6 +21,8 @@ const isMac = () => {
};
export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
const [query, setQuery] = useState('');
+ const [loading, setLoading] = useState(true);
+ const [showCreatePage, setShowCreatePage] = useState(true);
const { triggerQuickSearchModal } = useModal();
// Add ‘⌘+K’ shortcut keys as switches
useEffect(() => {
@@ -44,13 +46,13 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
{
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
@@ -59,18 +61,27 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
}}
>
-
+
{isMac() ? '⌘ + K' : 'Ctrl + K'}
-
+
-
-
-
-
+ {showCreatePage ? (
+ <>
+
+
+
+
+
+ ) : null}
);
diff --git a/packages/app/src/components/quick-search/input.tsx b/packages/app/src/components/quick-search/input.tsx
index 8171352197..bdffe50d25 100644
--- a/packages/app/src/components/quick-search/input.tsx
+++ b/packages/app/src/components/quick-search/input.tsx
@@ -5,6 +5,7 @@ import { Command } from 'cmdk';
export const Input = (props: {
query: string;
setQuery: Dispatch>;
+ setLoading: Dispatch>;
}) => {
const inputRef = useRef(null);
useEffect(() => {
@@ -18,7 +19,10 @@ export const Input = (props: {
{
+ props.setQuery(str);
+ props.setLoading(true);
+ }}
placeholder="Quick Search..."
/>
diff --git a/packages/app/src/components/quick-search/results.tsx b/packages/app/src/components/quick-search/results.tsx
index fb09b8f75a..3451c3be89 100644
--- a/packages/app/src/components/quick-search/results.tsx
+++ b/packages/app/src/components/quick-search/results.tsx
@@ -1,24 +1,29 @@
import { Command } from 'cmdk';
-import { StyledListItem } from './style';
+import { StyledListItem, StyledNotFound } from './style';
import { useModal } from '@/providers/global-modal-provider';
-import {
- AllPagesIcon,
- FavouritesIcon,
- TrashIcon,
- PaperIcon,
-} from '@blocksuite/icons';
+import { PaperIcon, LogoUnlogIcon } from '@blocksuite/icons';
import { useEditor } from '@/providers/editor-provider';
-import { useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { useRouter } from 'next/router';
+import { List } from './config';
-export const Results = (props: { query: string }) => {
+export const Results = (props: {
+ query: string;
+ loading: boolean;
+ setLoading: Dispatch>;
+ setShowCreatePage: Dispatch>;
+}) => {
const query = props.query;
+ const loading = props.loading;
+ const setLoading = props.setLoading;
+ const setShowCreatePage = props.setShowCreatePage;
const { triggerQuickSearchModal } = useModal();
const { search, openPage, pageList } = useEditor();
const router = useRouter();
const [results, setResults] = useState(new Map());
useEffect(() => {
- return setResults(search(query));
+ setResults(search(query));
+ setLoading(false);
//Save the Map obtained from the search as state
}, [query, search]);
const pageIds = [...results.values()];
@@ -26,66 +31,62 @@ export const Results = (props: { query: string }) => {
const resultsPageMeta = pageList.filter(
page => pageIds.indexOf(page.id) > -1
);
- return (
+
+ useEffect(() => {
+ setShowCreatePage(resultsPageMeta.length ? false : true);
+ //Determine whether to display the ‘+ New page’
+ }, [resultsPageMeta]);
+
+ return loading ? null : (
- No results found for "{query}".
-
- {resultsPageMeta.map(result => {
- return (
- {
- openPage(result.id);
- triggerQuickSearchModal();
- }}
- value={result.title}
- >
-
-
- {result.title}
-
-
- );
- })}
-
-
- {
- router.push('/page-list/all');
- triggerQuickSearchModal();
- }}
- >
-
-
- All pages
-
-
- {
- router.push('/page-list/favorite');
- triggerQuickSearchModal();
- }}
- >
-
-
- Favourites
-
-
- {
- router.push('/page-list/trash');
- triggerQuickSearchModal();
- }}
- >
-
-
- Trash
-
-
-
+ {query ? (
+ resultsPageMeta.length ? (
+
+ {resultsPageMeta.map(result => {
+ return (
+ {
+ openPage(result.id);
+ triggerQuickSearchModal();
+ }}
+ value={result.title}
+ >
+
+
+ {result.title}
+
+
+ );
+ })}
+
+ ) : (
+
+ Find 0 result
+
+
+ )
+ ) : (
+
+ {List.map(link => {
+ return (
+ {
+ router.push(link.href);
+ triggerQuickSearchModal();
+ }}
+ >
+
+
+ {link.title}
+
+
+ );
+ })}
+
+ )}
);
};
diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts
index 8be4e6a353..30171e5a36 100644
--- a/packages/app/src/components/quick-search/style.ts
+++ b/packages/app/src/components/quick-search/style.ts
@@ -2,16 +2,18 @@ import { displayFlex, styled } from '@/styles';
export const StyledContent = styled('div')(({ theme }) => {
return {
- minHeight: '224px',
- maxHeight: '50vh',
+ minHeight: '220px',
+ maxHeight: '55vh',
width: '100%',
overflow: 'auto',
+ marginBottom: '10px',
...displayFlex('center', 'flex-start'),
color: theme.colors.popoverColor,
letterSpacing: '0.06em',
'[cmdk-group-heading]': {
margin: '5px 16px',
fontSize: theme.font.sm,
+ fontWeight: '500',
},
'[aria-selected="true"]': {
transition: 'background .15s, color .15s',
@@ -33,6 +35,24 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
},
};
});
+export const StyledNotFound = styled('div')(({ theme }) => {
+ return {
+ width: '620px',
+ ...displayFlex('center', 'center'),
+ flexDirection: 'column',
+ padding: '10px 16px',
+ fontSize: theme.font.sm,
+ span: {
+ width: '100%',
+ fontWeight: '500',
+ },
+
+ '>svg': {
+ marginTop: '10px',
+ fontSize: '150px',
+ },
+ };
+});
export const StyledInputContent = styled('div')(({ theme }) => {
return {
margin: '13px 0',