diff --git a/packages/app/src/EditorApp.tsx b/packages/app/src/EditorApp.tsx index 4627bf3c..20e9497f 100644 --- a/packages/app/src/EditorApp.tsx +++ b/packages/app/src/EditorApp.tsx @@ -23,8 +23,6 @@ export const EditorApp: FC = ({ children }) => { }) }, []) - console.log('isLoaded:', isLoaded) - if (!isLoaded) { return null } diff --git a/packages/app/src/EditorLayout/Catalogue/NewDocPopover.tsx b/packages/app/src/EditorLayout/Catalogue/NewDocPopover.tsx index ba8d3746..ef2e060b 100644 --- a/packages/app/src/EditorLayout/Catalogue/NewDocPopover.tsx +++ b/packages/app/src/EditorLayout/Catalogue/NewDocPopover.tsx @@ -11,8 +11,7 @@ import { PopoverTrigger, } from 'uikit' import { CatalogueNodeType } from '@penx/catalogue' -import { useCatalogue, useSpaces } from '@penx/hooks' -import { db } from '@penx/local-db' +import { useCatalogue } from '@penx/hooks' const initialValue = [ { diff --git a/packages/app/src/Palette/CommandList.tsx b/packages/app/src/Palette/CommandList.tsx new file mode 100644 index 00000000..091017d7 --- /dev/null +++ b/packages/app/src/Palette/CommandList.tsx @@ -0,0 +1,53 @@ +import { Box, styled } from '@fower/react' +import { Command } from '@penx/cmdk' +import { useCommands } from '@penx/hooks' + +const CommandItem = styled(Command.Item) + +interface Props { + q: string + close: () => void +} + +export function CommandList({ q, close }: Props) { + const { commands } = useCommands() + const search = q.replace(/^>(\s+)?/, '').toLowerCase() + + const filteredItems = commands.filter((i) => { + if (!search) return true + return ( + i.title.toLowerCase().includes(search) || + i.id.toLowerCase().includes(search) + ) + }) + + return ( + <> + {!filteredItems.length && ( + No results found. + )} + + {filteredItems.map((item, i) => ( + { + close() + item.handler() + }} + onClick={() => { + item.handler() + }} + > + {item.title} + + ))} + + ) +} diff --git a/packages/app/src/Palette/DocList.tsx b/packages/app/src/Palette/DocList.tsx new file mode 100644 index 00000000..ff75a5b8 --- /dev/null +++ b/packages/app/src/Palette/DocList.tsx @@ -0,0 +1,47 @@ +import { styled } from '@fower/react' +import { Command } from '@penx/cmdk' +import { useCatalogue } from '@penx/hooks' + +const CommandItem = styled(Command.Item) + +interface Props { + q: string + close: () => void +} + +export function DocList({ q, close }: Props) { + const catalogue = useCatalogue() + const filteredItems = catalogue.docNodes.filter((i) => + i.name.toLowerCase().includes(q.toLowerCase()), + ) + + return ( + <> + {!filteredItems.length && ( + No results found. + )} + + {filteredItems.map((node) => ( + { + close() + catalogue.selectNode(node) + }} + onClick={() => { + catalogue.selectNode(node) + }} + > + {node.name} + + ))} + + ) +} diff --git a/packages/app/src/Palette/index.tsx b/packages/app/src/Palette/index.tsx index f68be56d..c4b448b3 100644 --- a/packages/app/src/Palette/index.tsx +++ b/packages/app/src/Palette/index.tsx @@ -2,15 +2,18 @@ import { useEffect, useState } from 'react' import { Box, styled } from '@fower/react' import { Command } from '@penx/cmdk' import { useCatalogue } from '@penx/hooks' +import { CommandList } from './CommandList' +import { DocList } from './DocList' const CommandDialog = styled(Command.Dialog) const CommandInput = styled(Command.Input) -const CommandList = styled(Command.List) -const CommandItem = styled(Command.Item) +const StyledCommandList = styled(Command.List) +const StyledCommandItem = styled(Command.Item) export function CommandPanel() { const [open, setOpen] = useState(false) const [search, setSearch] = useState('') + const catalogue = useCatalogue() const filteredItems = catalogue.docNodes.filter((i) => i.name.toLowerCase().includes(search.toLowerCase()), @@ -29,6 +32,9 @@ export function CommandPanel() { return () => document.removeEventListener('keydown', down) }, []) + const close = () => setOpen(false) + const isCommand = search.startsWith('>') + return ( - - {!filteredItems.length && ( - No results found. - )} + {!isCommand && } - {filteredItems.map((node) => ( - { - setOpen(false) - catalogue.selectNode(node) - }} - onClick={() => { - catalogue.selectNode(node) - }} - > - {node.name} - - ))} - - GOGO + {isCommand && } + ) } diff --git a/packages/domain/src/service/SyncService.ts b/packages/domain/src/service/SyncService.ts index f0af58ff..5351e385 100644 --- a/packages/domain/src/service/SyncService.ts +++ b/packages/domain/src/service/SyncService.ts @@ -82,9 +82,6 @@ export class SyncService { const changedIds = s.space.getChangedDocIds() const docs = await db.queryDocByIds(changedIds) - console.log('docs:', docs) - - console.log('docs:', docs) s.docs = docs.map((doc) => new Doc(doc)) diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 50755dd2..be6958c0 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -7,3 +7,4 @@ export * from './useHover' export * from './useCreateSpaceForm' export * from './useSyncStatus' export * from './useWorkers' +export * from './useCommands' diff --git a/packages/hooks/src/useCommands.ts b/packages/hooks/src/useCommands.ts new file mode 100644 index 00000000..e253e66d --- /dev/null +++ b/packages/hooks/src/useCommands.ts @@ -0,0 +1,7 @@ +import { useAtom } from 'jotai' +import { commandsAtom } from '@penx/store' + +export function useCommands() { + const [commands] = useAtom(commandsAtom) + return { commands } +} diff --git a/packages/store/src/store.ts b/packages/store/src/store.ts index 86ce7e52..86c881eb 100644 --- a/packages/store/src/store.ts +++ b/packages/store/src/store.ts @@ -4,7 +4,8 @@ import { IDoc, ISpace } from '@penx/local-db' export type Command = { id: string - name: string + title: string + pluginId?: string handler: () => void } export type PluginStore = Record< @@ -26,8 +27,17 @@ export const syncStatusAtom = atom(SyncStatus.NORMAL) export const commandsAtom = atom([ { id: 'foo', - name: 'foo', - handler: () => {}, + title: 'foo', + handler: () => { + console.log('fooo') + }, + }, + { + id: 'bar', + title: 'bar', + handler: () => { + console.log('bar') + }, }, ])