From e50b193afd470b0d61da82bead4bb0e36e73b72e Mon Sep 17 00:00:00 2001 From: 0xzion <0xzion.penx@gmail.com> Date: Thu, 16 May 2024 14:25:33 +0800 Subject: [PATCH] feat: improve command ux --- apps/desktop/src-tauri/src/main.rs | 9 +- apps/desktop/src-tauri/tauri.conf.json | 2 +- apps/desktop/src/components/CmdkRoot.tsx | 180 ++++++++++--------- apps/desktop/src/components/CommandApp.tsx | 23 +++ apps/desktop/src/hooks/useCommandPosition.ts | 15 ++ apps/desktop/src/hooks/useCurrentCommand.ts | 9 + 6 files changed, 151 insertions(+), 87 deletions(-) create mode 100644 apps/desktop/src/components/CommandApp.tsx create mode 100644 apps/desktop/src/hooks/useCommandPosition.ts create mode 100644 apps/desktop/src/hooks/useCurrentCommand.ts diff --git a/apps/desktop/src-tauri/src/main.rs b/apps/desktop/src-tauri/src/main.rs index 1d05e0f6c..ab8bba092 100644 --- a/apps/desktop/src-tauri/src/main.rs +++ b/apps/desktop/src-tauri/src/main.rs @@ -155,7 +155,8 @@ fn main() { window.center().unwrap(); } "Editor" => { - let window = app.get_window("dev_editor").unwrap(); + // let window = app.get_window("dev_editor").unwrap(); + let window = app.get_window("editor").unwrap(); window.emit("MenuEditorClicked", Some("Yes")).unwrap(); window.show().unwrap(); window.center().unwrap(); @@ -182,8 +183,10 @@ fn main() { thread::spawn(move || start_server(*boxed_handle, *boxed_conn).unwrap()); - let window = app.get_window("main").unwrap(); - set_shadow(&window, true).expect("Unsupported platform!"); + let main_window = app.get_window("main").unwrap(); + set_shadow(&main_window, true).expect("Unsupported platform!"); + + main_window.show().unwrap(); Ok(()) }) diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json index f816a3cc0..91462fd41 100644 --- a/apps/desktop/src-tauri/tauri.conf.json +++ b/apps/desktop/src-tauri/tauri.conf.json @@ -8,7 +8,7 @@ }, "package": { "productName": "PenX", - "version": "0.3.1" + "version": "0.3.7" }, "tauri": { "systemTray": { diff --git a/apps/desktop/src/components/CmdkRoot.tsx b/apps/desktop/src/components/CmdkRoot.tsx index 4c6249679..d2ab620da 100644 --- a/apps/desktop/src/components/CmdkRoot.tsx +++ b/apps/desktop/src/components/CmdkRoot.tsx @@ -1,14 +1,16 @@ import { useRef, useState } from 'react' import SVG from 'react-inlinesvg' -import Markdown from 'react-markdown' import { Box, css, styled } from '@fower/react' import { open } from '@tauri-apps/api/shell' import { Command } from 'cmdk' +import { ArrowLeft } from 'lucide-react' import Image from 'next/image' import { EventType, ListItem } from 'penx' import clipboard from 'tauri-plugin-clipboard-api' // import { Command } from '@penx/cmdk' import { db } from '@penx/local-db' +import { useCommandPosition } from '~/hooks/useCommandPosition' +import { useCurrentCommand } from '~/hooks/useCurrentCommand' import { useInstallBuiltinExtension } from '~/hooks/useInstallBuiltinExtension' import { useCommands, @@ -17,6 +19,7 @@ import { useQueryCommands, } from '~/hooks/useItems' import { useReset } from '~/hooks/useReset' +import { CommandApp } from './CommandApp' const StyledCommand = styled(Command) const CommandInput = styled(Command.Input) @@ -66,6 +69,9 @@ export const CmdkRoot = () => { const { detail, setDetail } = useDetail() const ref = useRef() + const { position, isRoot, isCommandApp, setPosition } = useCommandPosition() + const { currentCommand, setCurrentCommand } = useCurrentCommand() + useQueryCommands() useInstallBuiltinExtension() @@ -73,7 +79,11 @@ export const CmdkRoot = () => { async function handleSelect(item: ListItem, input = '') { if (item.type === 'command') { - if (!q) setQ(item.title as string) + // if (!q) setQ(item.title as string) + + setCurrentCommand(item) + + setPosition('COMMAND_APP') const ext = await db.getExtensionBySlug(item.data.extensionSlug) if (!ext) return @@ -119,8 +129,6 @@ export const CmdkRoot = () => { if (event.data?.type === EventType.RenderMarkdown) { const content = event.data.content as string setDetail(content) - setItems([]) - console.log('event......:', event) } } } @@ -167,91 +175,97 @@ export const CmdkRoot = () => { return 1 }} > - { - setQ(v) - if (v === '') { - setItems(commands) - setDetail('') - } - }} - onKeyDown={(e) => { - if (e.key === 'Enter') { - const [a, b = ''] = splitStringByFirstSpace(q) - const item = commands.find((item) => item.title === a) - if (item) { - handleSelect(item, String(b)) - } - } - }} - /> - - {detail && ( - - {detail} + + {isCommandApp && ( + + )} - - {!detail && No results found.} - + { + setQ(v) + if (v === '') { + setItems(commands) + setDetail('') + } + }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + // const [a, b = ''] = splitStringByFirstSpace(q) + // const item = commands.find((item) => item.title === a) + // if (item) { + // handleSelect(item, String(b)) + // } + if (!q && isCommandApp) { + setPosition('ROOT') + } + } + }} + /> + + + {isCommandApp && currentCommand && } + - {items.map((item, index) => { - const title = - typeof item.title === 'string' ? item.title : item.title.value + {isRoot && + items.map((item, index) => { + const title = + typeof item.title === 'string' ? item.title : item.title.value - const subtitle = - typeof item.subtitle === 'string' - ? item.subtitle - : item.subtitle?.value + const subtitle = + typeof item.subtitle === 'string' + ? item.subtitle + : item.subtitle?.value - return ( - { - handleSelect(item) - }} - onClick={() => { - handleSelect(item) - }} - > - - - {title} - - {subtitle} + return ( + { + handleSelect(item) + }} + onClick={() => { + handleSelect(item) + }} + > + + + {title} + + {subtitle} + + + + Command - - - Command - - - ) - })} + + ) + })} diff --git a/apps/desktop/src/components/CommandApp.tsx b/apps/desktop/src/components/CommandApp.tsx new file mode 100644 index 000000000..62314420d --- /dev/null +++ b/apps/desktop/src/components/CommandApp.tsx @@ -0,0 +1,23 @@ +import Markdown from 'react-markdown' +import { Box } from '@fower/react' +import { useCurrentCommand } from '~/hooks/useCurrentCommand' +import { useDetail } from '~/hooks/useItems' + +interface CommandAppProps { + // detail: string +} +export function CommandApp({}: CommandAppProps) { + const { currentCommand } = useCurrentCommand() + const { detail } = useDetail() + console.log('======currentCommand:', currentCommand) + + return ( + + {detail && ( + + {detail} + + )} + + ) +} diff --git a/apps/desktop/src/hooks/useCommandPosition.ts b/apps/desktop/src/hooks/useCommandPosition.ts new file mode 100644 index 000000000..21b652105 --- /dev/null +++ b/apps/desktop/src/hooks/useCommandPosition.ts @@ -0,0 +1,15 @@ +import { atom, useAtom } from 'jotai' + +type Position = 'ROOT' | 'COMMAND_APP' + +export const positionAtom = atom('ROOT') + +export function useCommandPosition() { + const [position, setPosition] = useAtom(positionAtom) + return { + isRoot: position === 'ROOT', + isCommandApp: position === 'COMMAND_APP', + position, + setPosition, + } +} diff --git a/apps/desktop/src/hooks/useCurrentCommand.ts b/apps/desktop/src/hooks/useCurrentCommand.ts new file mode 100644 index 000000000..6d5d68da6 --- /dev/null +++ b/apps/desktop/src/hooks/useCurrentCommand.ts @@ -0,0 +1,9 @@ +import { atom, useAtom } from 'jotai' +import { ListItem } from 'penx' + +export const currentCommandAtom = atom(null as any as ListItem) + +export function useCurrentCommand() { + const [currentCommand, setCurrentCommand] = useAtom(currentCommandAtom) + return { currentCommand, setCurrentCommand } +}