Command bar: add extrude command, nonlinear editing, etc (#1204)

* Tweak toaster look and feel * Add icons, tweak plus icon names * Rename commandBarMeta to commandBarConfig * Refactor command bar, add support for icons * Create a tailwind plugin for aria-pressed button state * Remove overlay from behind command bar * Clean up toolbar * Button and other style tweaks * Icon tweaks follow-up: make old icons work with new sizing * Delete unused static icons * More CSS tweaks * Small CSS tweak to project sidebar * Add command bar E2E test * fumpt * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * fix typo in a comment * Fix icon padding (built version only) * Update onboarding and warning banner icons padding * Misc minor style fixes * Get Extrude opening and canceling from command bar * Iconography tweaks * Get extrude kind of working * Refactor command bar config types and organization * Move command bar configs to be co-located with each other * Start building a state machine for the command bar * Start converting command bar to state machine * Add support for multiple args, confirmation step * Submission behavior, hotkeys, code organization * Add new test for extruding from command bar * Polish step back and selection hotkeys, CSS tweaks * Loading style tweaks * Validate selection inputs, polish UX of args re-editing * Prevent submission with multiple selection on singlular arg * Remove stray console logs * Tweak test, CSS nit, remove extrude "result" argument * Fix linting warnings * Show Ctrl+/ instead of ⌘K on all platforms but Mac * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Add "Enter sketch" to command bar * fix command bar test * Fix flaky cmd bar extrude test by waiting for engine select response * Cover both button labels '⌘K' and 'Ctrl+/' in test --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2023-12-13 12:49:01 -05:00
parent b01357b49e
commit d2535bb8c2
60 changed files with 4549 additions and 1939 deletions
--- a/src/components/CommandComboBox.tsx
+++ b/src/components/CommandComboBox.tsx
@ -0,0 +1,90 @@
+import { Combobox } from '@headlessui/react'
+import Fuse from 'fuse.js'
+import { useCommandsContext } from 'hooks/useCommandsContext'
+import { Command } from 'lib/commandTypes'
+import { useEffect, useState } from 'react'
+import { CustomIcon } from './CustomIcon'
+
+function CommandComboBox({
+  options,
+  placeholder,
+}: {
+  options: Command[]
+  placeholder?: string
+}) {
+  const { commandBarSend } = useCommandsContext()
+  const [query, setQuery] = useState('')
+  const [filteredOptions, setFilteredOptions] = useState<typeof options>()
+
+  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])
+
+  function handleSelection(command: Command) {
+    commandBarSend({ type: 'Select command', data: { command } })
+  }
+
+  return (
+    <Combobox defaultValue={defaultOption} onChange={handleSelection}>
+      <div className="flex items-center gap-2 px-4 pb-2 border-solid border-0 border-b border-b-chalkboard-20 dark:border-b-chalkboard-80">
+        <CustomIcon
+          name="search"
+          className="w-5 h-5 bg-energy-10/50 dark:bg-chalkboard-90 dark:text-energy-10"
+        />
+        <Combobox.Input
+          onChange={(event) => 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') ||
+              (event.key === 'Backspace' && !event.currentTarget.value)
+            ) {
+              commandBarSend({ type: 'Close' })
+            }
+          }}
+          placeholder={
+            (defaultOption && defaultOption.name) ||
+            placeholder ||
+            'Search commands'
+          }
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck="false"
+          autoFocus
+        />
+      </div>
+      <Combobox.Options
+        static
+        className="overflow-y-auto max-h-96 cursor-pointer"
+      >
+        {filteredOptions?.map((option) => (
+          <Combobox.Option
+            key={option.name}
+            value={option}
+            className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-energy-10/50 dark:ui-active:bg-chalkboard-90"
+          >
+            {'icon' in option && option.icon && (
+              <CustomIcon
+                name={option.icon}
+                className="w-5 h-5 dark:text-energy-10"
+              />
+            )}
+            <p className="flex-grow">{option.name} </p>
+          </Combobox.Option>
+        ))}
+      </Combobox.Options>
+    </Combobox>
+  )
+}
+
+export default CommandComboBox