refactor(global-search): update App component to include SearchScene

Modified the App component to render SearchScene based on activeScene and adjusted the test to verify the presence of search interface elements.

Author: elmarburke

plugins/global-search/src/App.test.tsx

@@ -4,8 +4,9 @@ import { describe, expect, it } from "vitest"
 import { App } from "./App"
 
 describe("App", () => {
-    it("should render", () => {
+    it("should render search interface", () => {
         render(<App />)
-        expect(screen.getByText(/Welcome!/gi)).toBeInTheDocument()
+        expect(screen.getByPlaceholderText(/Search/i)).toBeInTheDocument()
+        expect(screen.getByLabelText(/Search for anything in your Framer project/i)).toBeInTheDocument()
     })
 })

plugins/global-search/src/App.tsx

@@ -2,13 +2,13 @@ import { framer } from "framer-plugin"
 import { useEffect, useState } from "react"
 import { ErrorBoundary } from "react-error-boundary"
 import { DevToolsScene } from "./components/DevToolsScene"
+import { SearchScene } from "./components/SearchScene"
 import { IndexerProvider } from "./utils/indexer/IndexerProvider"
 
 framer.showUI({
     position: "top right",
-    width: 400,
-    height: 600,
-    resizable: true,
+    width: 280,
+    height: 64,
 })
 
 export function App() {
@@ -34,11 +34,8 @@ export function App() {
             )}
         >
             <IndexerProvider>
-                {activeScene === "dev-tools" ? (
-                    <DevToolsScene />
-                ) : (
-                    <div>Welcome! This is under development. Select "Open Dev Tools" to get started.</div>
-                )}
+                {activeScene === "dev-tools" && <DevToolsScene />}
+                {activeScene === "search" && <SearchScene />}
             </IndexerProvider>
         </ErrorBoundary>
     )