Command Palette

CHANGELOG.md

@@ -34,9 +34,11 @@
 - [Graph is not moved when showing/resizing side panels.][13557]
 - [Add "Invite" button to the top bar when using a team or higher plan][13522]
 - ["Welcome Project" is automatically opened for new users][13479]
-- [Project and Setting tab may be now closed with shortcut][13498][13604]. On
-  Windows/Linux <kbd>Ctrl</kbd>+<kbd>W</kbd> or <kbd>Ctrl</kbd> + <kbd>F4</kbd>;
-  on macOS: <kbd>⌘</kbd> + <kbd>W</kbd>.
+- [Project and Setting tab may be now closed with shortcut][13498]
+  (reimplemented in [13604][13604]). On Windows/Linux
+  <kbd>Ctrl</kbd>+<kbd>W</kbd> or <kbd>Ctrl</kbd> + <kbd>F4</kbd>; on macOS:
+  <kbd>⌘</kbd> + <kbd>W</kbd>.
+- [Command Palette to search for arbitrary actions][13658]
 
 [12774]: https://github.com/enso-org/enso/pull/12774
 [12778]: https://github.com/enso-org/enso/pull/12778
@@ -66,6 +68,7 @@
 [13479]: https://github.com/enso-org/enso/pull/13479
 [13498]: https://github.com/enso-org/enso/pull/13498
 [13604]: https://github.com/enso-org/enso/pull/13604
+[13658]: https://github.com/enso-org/enso/pull/13658
 
 #### Enso Standard Library
 

app/common/src/text/english.json

@@ -821,7 +821,7 @@
   "rootFolderColumnName": "Root folder",
   "pathColumnName": "Location",
   "hideDevtools": "Hide Devtools",
-  "ensoDevtoolsShortcut": "Enso Devtools",
+  "toggleEnsoDevtoolsShortcut": "Toggle Enso Devtools",
   "settingsShortcut": "Settings",
   "closeTabShortcut": "Close Tab",
   "openShortcut": "Open",
@@ -863,6 +863,15 @@
   "goForwardShortcut": "Go Forward",
   "upgradePlanShortcut": "Upgrade Plan",
   "aboutThisAppShortcut": "About Enso",
+  "goToAccountSettingsShortcut": "Account Settings",
+  "goToOrganizationSettingsShortcut": "Organization Settings",
+  "goToLocalSettingsShortcut": "Local Settings",
+  "goToBillingAndPlansSettingsShortcut": "Billing and Plans Settings",
+  "goToMembersSettingsShortcut": "Members Settings",
+  "goToUserGroupsSettingsShortcut": "User Groups Settings",
+  "goToKeyboardShortcutsSettingsShortcut": "Keyboard Shortcuts Settings",
+  "goToActivityLogSettingsShortcut": "Activity Log Settings",
+  "toggleCommandPaletteShortcut": "Toggle Command Palette",
   "moveToTrashShortcut": "Move To Trash",
   "moveAllToTrashShortcut": "Move All To Trash",
   "deleteForeverShortcut": "Delete Forever",

app/gui/package.json

@@ -82,6 +82,7 @@
     "dotenv": "^16.4.7",
     "enso-common": "workspace:*",
     "events": "^3.3.0",
+    "fuzzysort": "3.1.0",
     "framer-motion": "11.3.0",
     "hash-sum": "^2.0.0",
     "idb-keyval": "^6.2.1",

app/gui/src/App.vue

@@ -76,24 +76,15 @@ const { globalEventRegistry } = provideGlobalEventRegistry()
 useEvent(window, 'keydown', bindingsHandlers)
 useEvent(globalEventRegistry, 'pointerdown', (e) => interaction.handlePointerDown(e))
 
-const platformClass = (() => {
-  switch (platform()) {
-    case Platform.windows:
-      return 'onWindows'
-    case Platform.macOS:
-      return 'onMacOs'
-    case Platform.linux:
-      return 'onLinux'
-    case Platform.windowsPhone:
-      return 'onWindowsPhone'
-    case Platform.iPhoneOS:
-      return 'onIPhoneOs'
-    case Platform.android:
-      return 'onAndroid'
-    default:
-      return undefined
-  }
-})()
+const platformClass = {
+  [Platform.windows]: 'onWindows',
+  [Platform.macOS]: 'onMacOs',
+  [Platform.linux]: 'onLinux',
+  [Platform.windowsPhone]: 'onWindowsPhone',
+  [Platform.iPhoneOS]: 'onIPhoneOs',
+  [Platform.android]: 'onAndroid',
+  [Platform.unknown]: undefined,
+}[platform()]
 
 onMounted(() => {
   if (config.params.window.vibrancy) {

app/gui/src/components/AppContainer.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { Dashboard as DashboardReact, type DashboardProps } from '#/pages/dashboard/Dashboard'
 import { EnsoPath } from '#/services/Backend'
+import CommandPalette from '$/components/CommandPalette.vue'
 import { useBackends } from '$/providers/backends'
 import { provideContainerData } from '$/providers/container'
 import { provideOpenedProjects } from '$/providers/openedProjects'
@@ -59,8 +60,10 @@ const openedProjectsStore = provideOpenedProjects()
 provideAsyncResources(openedProjectsStore)
 provideContainerData()
 </script>
+
 <template>
   <div class="TabView">
+    <CommandPalette />
     <ContainerDataProviderForReact>
       <Dashboard v-bind="props" />
     </ContainerDataProviderForReact>

app/gui/src/components/CommandPalette.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import KeyboardShortcutReact from '#/pages/dashboard/components/KeyboardShortcut'
+import { unsetModal } from '#/providers/ModalProvider'
+import * as objects from '#/utilities/object'
+import { useActionsStore, type Action } from '$/providers/actions'
+import { useContainerData } from '$/providers/container'
+import { commandPaletteBindings } from '@/bindings'
+import SvgIcon from '@/components/SvgIcon.vue'
+import { useEvent } from '@/composables/events'
+import { registerHandlers } from '@/providers/action'
+import { injectInteractionHandler } from '@/providers/interactionHandler'
+import { reactComponent } from '@/util/react'
+import { AnimatePresence, motion } from 'motion-v'
+import { computed, ref, watchEffect } from 'vue'
+
+const KeyboardShortcut = reactComponent(KeyboardShortcutReact)
+
+const { findActions } = useActionsStore()
+const containerData = useContainerData()
+const interaction = injectInteractionHandler()
+
+const visible = ref(false)
+const query = ref('')
+const input = ref<HTMLInputElement | null>(null)
+
+const actionHandlers = registerHandlers({
+  'commandPalette.open': {
+    action: () => {
+      if (containerData.tab !== 'drive' && containerData.tab !== 'settings') return
+      visible.value = true
+    },
+  },
+})
+
+watchEffect(() => {
+  if (!input.value) return
+  if (visible.value) {
+    unsetModal()
+    input.value.focus()
+    interaction.setCurrent({
+      cancel() {
+        visible.value = false
+      },
+      end() {
+        visible.value = false
+      },
+    })
+  } else {
+    input.value.blur()
+    query.value = ''
+  }
+})
+
+useEvent(
+  window,
+  'keydown',
+  commandPaletteBindings.handler(
+    objects.mapEntries(
+      commandPaletteBindings.bindings,
+      (actionName) => actionHandlers[actionName].action,
+    ),
+  ),
+)
+
+function trigger(action: Action | undefined) {
+  if (!action) return
+  visible.value = false
+  action.doAction()
+}
+
+const actions = computed(() => findActions(query))
+</script>
+
+<template>
+  <AnimatePresence>
+    <motion.div
+      v-if="visible"
+      class="CommandPalette"
+      :initial="{ opacity: 0, y: '-100px' }"
+      :animate="{ opacity: 1, y: '0' }"
+      :exit="{ opacity: 0, y: '-100px' }"
+      @click.stop="visible = false"
+      @keydown.enter.stop
+    >
+      <div class="container" @click.stop>
+        <input
+          ref="input"
+          v-model="query"
+          type="text"
+          placeholder="Search actions..."
+          @keydown.enter.prevent="trigger(actions[0])"
+        />
+        <div class="scroll-container">
+          <ul>
+            <li v-for="(action, i) in actions" :key="i">
+              <button @click="trigger(action)">
+                <SvgIcon v-if="action.icon" :name="action.icon" class="icon" />
+                <div v-else class="icon-placeholder"></div>
+                <!-- eslint-disable vue/no-v-html -->
+                <span class="entry-content" v-html="action.highlighted.name"></span>
+                <!-- eslint-enable -->
+                <div class="shortcuts">
+                  <KeyboardShortcut
+                    v-for="(shortcut, j) in action.shortcuts"
+                    :key="j"
+                    :shortcut="shortcut"
+                  />
+                </div>
+              </button>
+            </li>
+            <li v-if="!actions.length" class="disabled">No actions found</li>
+          </ul>
+        </div>
+      </div>
+    </motion.div>
+  </AnimatePresence>
+</template>
+
+<style scoped>
+.CommandPalette {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--color-text);
+  max-height: 100vh;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    top: -100px;
+    height: calc(100% + 200px);
+    background: var(--color-dim);
+  }
+}
+
+.container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--color-app-bg);
+  border-radius: var(--radius-default);
+  backdrop-filter: blur(8px);
+  cursor: default;
+  padding: 1em;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1em;
+  max-width: 32em;
+}
+
+.scroll-container {
+  overflow-y: auto;
+  height: 20em;
+  width: 100%;
+  padding-right: 0.5em;
+}
+
+input {
+  background: none;
+  width: calc(100% + 2em);
+  margin: 0 -1em;
+  padding: 0 2em 0.5em 2em;
+  border-bottom: 0.1px solid rgb(0 0 0 / 0.2);
+}
+
+button {
+  display: flex;
+  gap: 0.75em;
+  align-items: center;
+}
+
+.icon,
+.icon-placeholder {
+  display: inline-block;
+  color: var(--color-text);
+}
+
+.icon-placeholder {
+  width: 1em;
+}
+
+.entry-content {
+  margin-right: auto;
+}
+
+.shortcuts {
+  display: flex;
+  gap: 0.5em;
+  color: var(--color-text-secondary);
+}
+
+li {
+  color: var(--color-primary);
+  border-radius: var(--radius-default);
+  padding: 0.2em 1em;
+
+  &:focus-within {
+    background-color: var(--color-menu-entry-selected-bg);
+  }
+
+  &:not(.disabled):hover {
+    background-color: var(--color-menu-entry-hover-bg);
+  }
+
+  button {
+    width: 100%;
+    text-align: left;
+    border-radius: var(--radius-default);
+  }
+}
+
+:deep(.highlighted) {
+  color: var(--color-text);
+  font-weight: bold;
+}
+</style>