[6.x] Command Palette (Part 1)

package.json

@@ -8,7 +8,7 @@
     "svgo": "svgo -f ./resources/svg/  -r",
     "test": "vitest run",
     "test-watch": "npm run test -- --watch --notify",
-    "frontend-dev": "vite build -c vite-frontend.config.js --watch",
+    "frontend-dev": "vite -c vite-frontend.config.js",
     "frontend-build": "vite build -c vite-frontend.config.js",
     "prettier:format": "prettier --write \"**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}\"",
     "prettier:check": "prettier --check \"**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}\"",
@@ -63,6 +63,7 @@
     "cva": "^1.0.0-beta.3",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
+    "fuzzysort": "^3.1.0",
     "highlight.js": "^11.7.0",
     "laravel-echo": "^1.16.0",
     "lodash-es": "^4.17.21",

resources/css/components/global-header.css

@@ -29,119 +29,6 @@
     }
 }
 
-/* Search
-   ========================================================================== */
-.global-search {
-    @apply relative flex hidden items-center rounded-md border px-2 py-0 dark:border-dark-300;
-    transition: 0.12s ease-out;
-
-    .search-input {
-        @apply w-full max-w-full text-sm dark:bg-dark-600 dark:text-dark-150;
-        padding-left: 5px;
-        padding-right: 20px;
-        [dir='rtl'] & {
-            padding-left: 20px;
-            padding-right: 5px;
-        }
-        height: 32px;
-        &:focus {
-            outline: 0;
-        }
-    }
-
-    .global-search-results {
-        @apply absolute w-full rounded-sm border border-gray-500 bg-white p-0 shadow-lg;
-        @apply dark:border-dark-900 dark:bg-dark-650;
-        top: 36px;
-        left: -1px;
-        [dir='rtl'] & {
-            left: auto;
-            right: -1px;
-        } /*  border offset */
-        z-index: 999;
-    }
-
-    .global-search-loading-indicator {
-        position: absolute;
-        right: 8px;
-        [dir='rtl'] & {
-            right: auto;
-            left: 8px;
-        }
-    }
-
-    .global-search-result-item {
-        @apply cursor-pointer border-t dark:border-dark-800 dark:bg-dark-600 dark:text-dark-150;
-
-        &:first-child {
-            @apply rounded-t border-none;
-        }
-
-        &:last-child {
-            @apply rounded-b;
-        }
-    }
-
-    .global-search-result-badge {
-        @apply rounded-sm border bg-gray-200 px-1 text-2xs text-gray;
-        @apply dark:border-dark-700 dark:bg-dark-600 dark:text-dark-100;
-    }
-
-    .active {
-        @apply bg-gray-300 dark:bg-dark-650;
-    }
-
-    .title {
-        @apply text-sm font-medium;
-    }
-
-    .url {
-        @apply text-2xs text-gray-400;
-    }
-
-    .status {
-        float: right;
-        [dir='rtl'] & {
-            float: left;
-        }
-        background: #ddd;
-        border-radius: 2px;
-        padding: 2px 4px;
-    }
-
-    .icon {
-        @apply relative cursor-pointer overflow-hidden text-gray dark:text-dark-175;
-        font-size: 18px;
-        top: 1px;
-        width: 20px;
-        height: 20px;
-        line-height: 20px;
-    }
-
-    .reset {
-        font-size: 21px;
-        left: -3px;
-        [dir='rtl'] & {
-            left: auto;
-            right: -3px;
-        }
-        position: relative;
-    }
-
-    kbd {
-        @apply rounded-sm border px-1 pb-px font-sans text-2xs text-gray-500;
-    }
-}
-
-@media (width >= theme(--breakpoint-lg)) {
-    .global-search {
-        @apply flex w-128 max-w-full;
-        .global-search-results {
-            @apply w-128;
-        }
-    }
-}
-
 .site-selector {
     .v-select {
         @apply h-full;

resources/js/bootstrap/App.vue

@@ -1,5 +1,4 @@
 <script>
-import GlobalSearch from '../components/GlobalSearch.vue';
 import GlobalSiteSelector from '../components/GlobalSiteSelector.vue';
 import Login from '../components/login/Login.vue';
 import BaseEntryCreateForm from '../components/entries/BaseCreateForm.vue';
@@ -42,12 +41,13 @@ import AssetContainerEditForm from '../components/asset-containers/EditForm.vue'
 import Updater from '../components/updater/Updater.vue';
 import PortalTargets from '../components/portals/PortalTargets.vue';
 import SitesEditForm from '../components/sites/EditForm.vue';
+import CommandPalette from '../components/command-palette/CommandPalette.vue';
 import { defineAsyncComponent } from 'vue';
 import { ConfigProvider } from 'reka-ui';
 
 export default {
     components: {
-        GlobalSearch,
+        CommandPalette,
         GlobalSiteSelector,
         Login,
         BaseEntryCreateForm,

resources/js/bootstrap/statamic.js

@@ -86,6 +86,10 @@ export default {
         return { defineStore };
     },
 
+    get $keys() {
+        return this.$app.config.globalProperties.$keys;
+    },
+
     get $permissions() {
         return this.$app.config.globalProperties.$permissions;
     },