Merge pull request framer#402 from framer/global-search/order-results

Global Search: Order Results and Search Menu items

Author: elmarburke

plugins/global-search/src/components/SearchScene.tsx

@@ -2,6 +2,7 @@ import { framer, type MenuItem } from "framer-plugin"
 import { useCallback, useDeferredValue, useEffect, useMemo, useState } from "react"
 import { FocusScope } from "react-aria"
 import { cn } from "../utils/className"
+import { compareRootNodeTypeByPriority } from "../utils/filter/group-results"
 import { useAsyncFilter } from "../utils/filter/useAsyncFilter"
 import type { RootNodeType } from "../utils/indexer/types"
 import { useIndexer } from "../utils/indexer/useIndexer"
@@ -88,11 +89,13 @@ const optionsMenuLabels = {
     Collection: "Collections",
 } as const satisfies Record<RootNodeType, string>
 
+const sortedRootNodeTypes = entries(optionsEnabled).sort(([a], [b]) => compareRootNodeTypeByPriority(a, b))
+
 function useOptionsMenuItems() {
     const [searchOptions, setSearchOptions] = useState<readonly RootNodeType[]>(defaultSearchOptions)
 
     const optionsMenuItems = useMemo((): MenuItem[] => {
-        return entries(optionsEnabled).map(([rootNode, enabled]) => ({
+        return sortedRootNodeTypes.map(([rootNode, enabled]) => ({
             id: rootNode,
             label: optionsMenuLabels[rootNode],
             enabled,

plugins/global-search/src/components/ui/Menu.tsx

@@ -22,7 +22,6 @@ export const Menu = memo(function Menu({ items, children, className }: MenuProps
                 .showContextMenu(items, {
                     location: { x: buttonBounds.right - 5, y: buttonBounds.bottom },
                     placement: "bottom-left",
-                    width: 200,
                 })
                 .catch((error: unknown) => {
                     framer.notify(

plugins/global-search/src/utils/filter/group-results.ts

@@ -1,3 +1,4 @@
+import type { RootNodeType } from "../indexer/types"
 import type { Result } from "./types"
 
 export interface EntryResult {
@@ -21,11 +22,19 @@ export function groupResults(items: readonly Result[]): readonly EntryResult[] {
         }
     }
 
-    return Array.from(entryMap.values()).map((results): EntryResult => {
-        const [first] = results
-        return {
-            entry: first.entry,
-            results,
-        }
-    })
+    return Array.from(entryMap.values())
+        .map((results): EntryResult => {
+            const [first] = results
+            return {
+                entry: first.entry,
+                results,
+            }
+        })
+        .sort((a, b) => compareRootNodeTypeByPriority(a.entry.rootNodeType, b.entry.rootNodeType))
+}
+
+const orderOfResults = ["WebPageNode", "Collection", "ComponentNode"] satisfies RootNodeType[]
+
+export function compareRootNodeTypeByPriority(a: RootNodeType, b: RootNodeType): number {
+    return orderOfResults.indexOf(a) - orderOfResults.indexOf(b)
 }