diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
index fd98f5a9a..5085ed0e4 100644
--- a/src/components/AppHeader.tsx
+++ b/src/components/AppHeader.tsx
@@ -5,6 +5,8 @@ import ProjectSidebarMenu from './ProjectSidebarMenu'
import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
import styles from './AppHeader.module.css'
import { NetworkHealthIndicator } from './NetworkHealthIndicator'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { ActionButton } from './ActionButton'
interface AppHeaderProps extends React.PropsWithChildren {
showToolbar?: boolean
@@ -20,13 +22,14 @@ export const AppHeader = ({
className = '',
enableMenu = false,
}: AppHeaderProps) => {
+ const { setCommandBarOpen } = useCommandsContext()
const { auth } = useGlobalStateContext()
const user = auth?.context?.user
return (
{/* Toolbar if the context deems it */}
- {showToolbar && (
-
+
+ {showToolbar ? (
-
- )}
- {/* If there are children, show them, otherwise show User menu */}
- {children || (
-
-
-
-
- )}
+ ) : (
+
setCommandBarOpen(true)}
+ className="text-sm self-center flex items-center w-fit gap-3"
+ >
+ Command Palette{' '}
+
+ ⌘K
+
+
+ )}
+
+
+ {/* If there are children, show them, otherwise show User menu */}
+ {children || (
+ <>
+
+
+
+ )}
+
)
}
diff --git a/src/components/CodeMenu.module.css b/src/components/CodeMenu.module.css
index 687601c5f..173ebecc4 100644
--- a/src/components/CodeMenu.module.css
+++ b/src/components/CodeMenu.module.css
@@ -1,13 +1,13 @@
.button {
@apply flex justify-between items-center gap-2 px-2 py-1 text-left border-none rounded-sm;
@apply font-mono text-xs font-bold select-none text-chalkboard-90;
- @apply ui-active:bg-liquid-10/50 ui-active:text-liquid-90;
+ @apply ui-active:bg-energy-10/50 ui-active:text-inherit;
@apply transition-colors ease-out;
}
:global(.dark) .button {
@apply text-chalkboard-30;
- @apply ui-active:bg-chalkboard-80 ui-active:text-liquid-10;
+ @apply ui-active:bg-chalkboard-80 ui-active:text-energy-10;
}
.button small {
diff --git a/src/components/CodeMenu.tsx b/src/components/CodeMenu.tsx
index c8ec187e9..a020732fe 100644
--- a/src/components/CodeMenu.tsx
+++ b/src/components/CodeMenu.tsx
@@ -30,8 +30,10 @@ export const CodeMenu = ({ children }: PropsWithChildren) => {
diff --git a/src/components/CollapsiblePanel.tsx b/src/components/CollapsiblePanel.tsx
index d1dc7dc89..ba265f345 100644
--- a/src/components/CollapsiblePanel.tsx
+++ b/src/components/CollapsiblePanel.tsx
@@ -24,16 +24,17 @@ export const PanelHeader = ({
}: CollapsiblePanelProps) => {
return (
-
+
{title}
diff --git a/src/components/CommandBar.tsx b/src/components/CommandBar.tsx
index fd80ebb43..8699be317 100644
--- a/src/components/CommandBar.tsx
+++ b/src/components/CommandBar.tsx
@@ -4,18 +4,22 @@ import {
Fragment,
SetStateAction,
createContext,
+ useEffect,
+ useRef,
useState,
} from 'react'
import { useHotkeys } from 'react-hotkeys-hook'
-import { ActionIcon } from './ActionIcon'
-import { faSearch } from '@fortawesome/free-solid-svg-icons'
import Fuse from 'fuse.js'
-import { Command, SubCommand } from '../lib/commands'
+import {
+ Command,
+ CommandArgument,
+ CommandArgumentOption,
+} from '../lib/commands'
import { useCommandsContext } from 'hooks/useCommandsContext'
+import { CustomIcon } from './CustomIcon'
-export type SortedCommand = {
- item: Partial
& { name: string }
-}
+type ComboboxOption = Command | CommandArgumentOption
+type CommandArgumentData = [string, any]
export const CommandsContext = createContext(
{} as {
@@ -35,12 +39,24 @@ export const CommandBarProvider = ({
const [commands, internalSetCommands] = useState([] as Command[])
const [commandBarOpen, setCommandBarOpen] = useState(false)
+ function sortCommands(a: Command, b: Command) {
+ if (b.owner === 'auth') return -1
+ if (a.owner === 'auth') return 1
+ return a.name.localeCompare(b.name)
+ }
+
+ useEffect(() => console.log('commands updated', commands), [commands])
+
const addCommands = (newCommands: Command[]) => {
- internalSetCommands((prevCommands) => [...newCommands, ...prevCommands])
+ internalSetCommands((prevCommands) =>
+ [...newCommands, ...prevCommands].sort(sortCommands)
+ )
}
const removeCommands = (newCommands: Command[]) => {
internalSetCommands((prevCommands) =>
- prevCommands.filter((command) => !newCommands.includes(command))
+ prevCommands
+ .filter((command) => !newCommands.includes(command))
+ .sort(sortCommands)
)
}
@@ -63,152 +79,117 @@ export const CommandBarProvider = ({
const CommandBar = () => {
const { commands, commandBarOpen, setCommandBarOpen } = useCommandsContext()
useHotkeys(['meta+k', 'meta+/'], () => {
- if (commands.length === 0) return
+ if (commands?.length === 0) return
setCommandBarOpen(!commandBarOpen)
})
- const [selectedCommand, setSelectedCommand] = useState(
- null
+ const [selectedCommand, setSelectedCommand] = useState()
+ const [commandArguments, setCommandArguments] = useState(
+ []
)
- // keep track of the current subcommand index
- const [subCommandIndex, setSubCommandIndex] = useState()
- const [subCommandData, setSubCommandData] = useState<{
- [key: string]: string
- }>({})
-
- // if the subcommand index is null, we're not in a subcommand
- const inSubCommand =
- selectedCommand &&
- 'meta' in selectedCommand.item &&
- selectedCommand.item.meta?.args !== undefined &&
- subCommandIndex !== undefined
- const currentSubCommand =
- inSubCommand && 'meta' in selectedCommand.item
- ? selectedCommand.item.meta?.args[subCommandIndex]
- : undefined
-
- const [query, setQuery] = useState('')
-
- const availableCommands =
- inSubCommand && currentSubCommand
- ? currentSubCommand.type === 'string'
- ? query
- ? [{ name: query }]
- : currentSubCommand.options
- : currentSubCommand.options
- : commands
-
- const fuse = new Fuse(availableCommands || [], {
- keys: ['name', 'description'],
- })
-
- const filteredCommands = query
- ? fuse.search(query)
- : availableCommands?.map((c) => ({ item: c } as SortedCommand))
+ const [commandArgumentData, setCommandArgumentData] = useState<
+ CommandArgumentData[]
+ >([])
+ const [commandArgumentIndex, setCommandArgumentIndex] = useState(0)
function clearState() {
- setQuery('')
setCommandBarOpen(false)
- setSelectedCommand(null)
- setSubCommandIndex(undefined)
- setSubCommandData({})
+ setSelectedCommand(undefined)
+ setCommandArguments([])
+ setCommandArgumentData([])
+ setCommandArgumentIndex(0)
}
- function handleCommandSelection(entry: SortedCommand) {
- // If we have subcommands and have not yet gathered all the
- // data required from them, set the selected command to the
- // current command and increment the subcommand index
- if (selectedCommand === null && 'meta' in entry.item && entry.item.meta) {
- setSelectedCommand(entry)
- setSubCommandIndex(0)
- setQuery('')
- return
+ function selectCommand(command: Command) {
+ console.log('selecting command', command)
+ if (!('args' in command && command.args?.length)) {
+ submitCommand({ command })
+ } else {
+ setCommandArguments(command.args)
+ setSelectedCommand(command)
}
+ }
- const { item } = entry
- // If we have just selected a command with no subcommands, run it
- const isCommandWithoutSubcommands =
- 'callback' in item && !('meta' in item && item.meta)
- if (isCommandWithoutSubcommands) {
- if (item.callback === undefined) return
- item.callback()
- setCommandBarOpen(false)
- return
- }
-
- // If we have subcommands and have not yet gathered all the
- // data required from them, set the selected command to the
- // current command and increment the subcommand index
- if (
- selectedCommand &&
- subCommandIndex !== undefined &&
- 'meta' in selectedCommand.item
- ) {
- const subCommand = selectedCommand.item.meta?.args[subCommandIndex]
-
- if (subCommand) {
- const newSubCommandData = {
- ...subCommandData,
- [subCommand.name]: item.name,
- }
- const newSubCommandIndex = subCommandIndex + 1
-
- // If we have subcommands and have gathered all the data required
- // from them, run the command with the gathered data
- if (
- selectedCommand.item.callback &&
- selectedCommand.item.meta?.args.length === newSubCommandIndex
- ) {
- selectedCommand.item.callback(newSubCommandData)
- setCommandBarOpen(false)
- } else {
- // Otherwise, set the subcommand data and increment the subcommand index
- setSubCommandData(newSubCommandData)
- setSubCommandIndex(newSubCommandIndex)
- setQuery('')
- }
+ function stepBack() {
+ if (!selectedCommand) {
+ clearState()
+ } else {
+ if (commandArgumentIndex === 0) {
+ setSelectedCommand(undefined)
+ } else {
+ setCommandArgumentIndex((prevIndex) => Math.max(0, prevIndex - 1))
+ }
+ if (commandArgumentData.length > 0) {
+ setCommandArgumentData((prevData) => prevData.slice(0, -1))
}
}
}
- function getDisplayValue(command: Command) {
- if (command.meta?.displayValue === undefined || !command.meta.args)
- return command.name
- return command.meta?.displayValue(
- command.meta.args.map((c) =>
- subCommandData[c.name] ? subCommandData[c.name] : `<${c.name}>`
+ function appendCommandArgumentData(data: { name: any }) {
+ const transformedData = [
+ commandArguments[commandArgumentIndex].name,
+ data.name,
+ ]
+ if (commandArgumentIndex + 1 === commandArguments.length) {
+ submitCommand({
+ dataArr: [
+ ...commandArgumentData,
+ transformedData,
+ ] as CommandArgumentData[],
+ })
+ } else {
+ setCommandArgumentData(
+ (prevData) => [...prevData, transformedData] as CommandArgumentData[]
)
- )
+ setCommandArgumentIndex((prevIndex) => prevIndex + 1)
+ }
+ }
+
+ function submitCommand({
+ command = selectedCommand,
+ dataArr = commandArgumentData,
+ }) {
+ console.log('submitting command', command, dataArr)
+ if (dataArr.length === 0) {
+ command?.callback()
+ } else {
+ const data = Object.fromEntries(dataArr)
+ console.log('submitting data', data)
+ command?.callback(data)
+ }
+ setCommandBarOpen(false)
+ }
+
+ function getDisplayValue(command: Command) {
+ if (
+ 'args' in command &&
+ command.args &&
+ command.args?.length > 0 &&
+ 'formatFunction' in command &&
+ command.formatFunction
+ ) {
+ command.formatFunction(
+ command.args.map((c, i) =>
+ commandArgumentData[i] ? commandArgumentData[i][0] : `<${c.name}>`
+ )
+ )
+ }
+
+ return command.name
}
return (
0
- }
- as={Fragment}
+ show={commandBarOpen || false}
afterLeave={() => clearState()}
+ as={Fragment}
>
)
}
+function Argument({
+ arg,
+ appendCommandArgumentData,
+ stepBack,
+}: {
+ arg: CommandArgument
+ appendCommandArgumentData: Dispatch>
+ stepBack: () => void
+}) {
+ const { setCommandBarOpen } = useCommandsContext()
+ const inputRef = useRef(null)
+
+ useEffect(() => {
+ if (inputRef.current) {
+ inputRef.current.focus()
+ inputRef.current.select()
+ }
+ }, [arg, inputRef])
+
+ return arg.type === 'select' ? (
+
+ ) : (
+
+ )
+}
+
export default CommandBarProvider
+
+function CommandComboBox({
+ options,
+ handleSelection,
+ stepBack,
+ placeholder,
+}: {
+ options: ComboboxOption[]
+ handleSelection: Dispatch>
+ stepBack: () => void
+ placeholder?: string
+}) {
+ const { setCommandBarOpen } = useCommandsContext()
+ const [query, setQuery] = useState('')
+ const [filteredOptions, setFilteredOptions] = useState()
+
+ const defaultOption =
+ options.find((o) => 'isCurrent' in o && o.isCurrent) || null
+
+ const fuse = new Fuse(options, {
+ keys: ['name', 'description'],
+ threshold: 0.3,
+ })
+
+ useEffect(() => {
+ const results = fuse.search(query).map((result) => result.item)
+ setFilteredOptions(query.length > 0 ? results : options)
+ }, [query])
+
+ return (
+
+
+
+ setQuery(event.target.value)}
+ className="w-full bg-transparent focus:outline-none selection:bg-energy-10/50 dark:selection:bg-energy-10/20 dark:focus:outline-none"
+ onKeyDown={(event) => {
+ if (event.metaKey && event.key === 'k') setCommandBarOpen(false)
+ if (event.key === 'Backspace' && !event.currentTarget.value) {
+ stepBack()
+ }
+ }}
+ placeholder={
+ (defaultOption && defaultOption.name) ||
+ placeholder ||
+ 'Search commands'
+ }
+ autoCapitalize="off"
+ autoComplete="off"
+ autoCorrect="off"
+ spellCheck="false"
+ autoFocus
+ />
+
+
+ {filteredOptions?.map((option) => (
+
+ {'icon' in option && option.icon && (
+
+ )}
+ {option.name}
+ {'isCurrent' in option && option.isCurrent && (
+
+ current
+
+ )}
+
+ ))}
+
+
+ )
+}
diff --git a/src/components/CustomIcon.tsx b/src/components/CustomIcon.tsx
index a1e59f662..55266eb1a 100644
--- a/src/components/CustomIcon.tsx
+++ b/src/components/CustomIcon.tsx
@@ -1,14 +1,21 @@
export type CustomIconName =
- | 'createFile'
- | 'createFolder'
+ | 'arrowDown'
+ | 'arrowLeft'
+ | 'arrowRight'
+ | 'arrowUp'
+ | 'close'
| 'equal'
- | 'exit'
| 'extrude'
| 'file'
+ | 'filePlus'
+ | 'folder'
+ | 'folderPlus'
+ | 'gear'
| 'horizontal'
| 'line'
| 'move'
| 'parallel'
+ | 'search'
| 'sketch'
| 'vertical'
@@ -19,7 +26,7 @@ export const CustomIcon = ({
name: CustomIconName
} & React.SVGProps) => {
switch (name) {
- case 'createFile':
+ case 'arrowDown':
return (
)
- case 'createFolder':
+ case 'arrowLeft':
return (
+
+ )
+ case 'arrowRight':
+ return (
+
+ )
+ case 'arrowUp':
+ return (
+
+ )
+ case 'close':
+ return (
+
@@ -65,21 +120,6 @@ export const CustomIcon = ({
/>
)
- case 'exit':
- return (
-
- )
-
case 'extrude':
return (
+ )
+ case 'filePlus':
+ return (
+
+ )
+ case 'folder':
+ return (
+
+ )
+ case 'folderPlus':
+ return (
+
+ )
+ case 'gear':
+ return (
+
)
@@ -174,6 +280,22 @@ export const CustomIcon = ({
/>
)
+ case 'search':
+ return (
+
+ )
case 'sketch':
return (
-
- Dismiss
-
-
- Next: Code Editing
-
-