Phosphor plugin improvements

plugins/phosphor/src/App.css

@@ -37,13 +37,19 @@
     overflow-y: scroll;
 }
 
+.search-input-container {
+    position: relative;
+    width: 100%;
+}
+
 .search-input {
     height: 30px;
     width: 100%;
     font-size: 12px;
     line-height: 24px;
     font-weight: 500 !important;
     font-family: "Inter", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    padding-left: 33px;
 }
 
 .search-input::placeholder {
@@ -55,6 +61,17 @@
     font-family: "Inter", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
 
+.search-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 11px;
+    top: 0;
+    bottom: 0;
+    color: var(--framer-color-text-tertiary);
+}
+
 .grid {
     width: 100%;
     display: grid;

plugins/phosphor/src/App.tsx

@@ -1,6 +1,7 @@
 import { Draggable, framer, useIsAllowedTo } from "framer-plugin"
 import Fuse from "fuse.js"
 import { Suspense, useCallback, useDeferredValue, useMemo, useState } from "react"
+import SearchIcon from "./SearchIcon"
 import "./App.css"
 
 import { icons as iconData } from "@phosphor-icons/core"
@@ -66,6 +67,16 @@ const fuse = new Fuse(icons, {
     useExtendedSearch: true,
 })
 
+function formatIconName(name?: string): string {
+    if (!name) return "Unknown"
+
+    return name
+        .split("-")
+        .filter(Boolean)
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(" ")
+}
+
 function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
     const { searchQuery, weight } = props
 
@@ -90,6 +101,8 @@ function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
                 svg,
                 name: "Icon",
             })
+
+            framer.notify(`Inserted ${formatIconName(entry.name)} icon`, { variant: "success" })
         },
         [weight]
     )
@@ -114,6 +127,17 @@ function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
                             name: "Icon",
                             svg: renderToStaticMarkup(<Icon size={32} color={"black"} weight={weight} />),
                         })}
+                        onDragComplete={result => {
+                            if (result.status === "success") {
+                                framer.notify(`Inserted ${formatIconName(entry.name)} icon`, {
+                                    variant: "success",
+                                })
+                            } else {
+                                framer.notify(`Failed to insert ${formatIconName(entry.name)} icon`, {
+                                    variant: "error",
+                                })
+                            }
+                        }}
                         key={entry.name}
                     >
                         <button
@@ -123,7 +147,7 @@ function IconGrid(props: { searchQuery: string; weight: IconWeight }) {
                                 void handleIconClick(entry)
                             }}
                             disabled={!isAllowedToAddSVG}
-                            title={isAllowedToAddSVG ? undefined : "Insufficient permissions"}
+                            title={formatIconName(entry.name)}
                         >
                             <Icon size={32} color={"var(--framer-color-text)"} weight={weight} />
                         </button>
@@ -141,16 +165,21 @@ export function App() {
     return (
         <>
             <div className="search-container">
-                <input
-                    autoComplete="nope"
-                    autoCorrect="off"
-                    autoFocus
-                    className="search-input"
-                    onChange={e => {
-                        setSearchQuery(e.target.value)
-                    }}
-                    placeholder="Search…"
-                />
+                <div className="search-input-container">
+                    <input
+                        autoComplete="nope"
+                        autoCorrect="off"
+                        autoFocus
+                        className="search-input"
+                        onChange={e => {
+                            setSearchQuery(e.target.value)
+                        }}
+                        placeholder="Search…"
+                    />
+                    <div className="search-icon">
+                        <SearchIcon />
+                    </div>
+                </div>
                 <select
                     className="weight-selector"
                     value={weight}

plugins/phosphor/src/SearchIcon.tsx

@@ -0,0 +1,18 @@
+export default function SearchIcon() {
+    return (
+        <svg
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            fill="none"
+            viewBox="0 0 12 12"
+            aria-label="Search"
+        >
+            <path
+                d="M5.299.5a5 5 0 0 1 4.416 7.345.75.75 0 0 0 .127.887l1.621 1.622a.749.749 0 1 1-1.06 1.06L8.851 9.862a.75.75 0 0 0-.925-.107A5.001 5.001 0 1 1 5.299.5m-3.5 5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 0 0-7 0"
+                fill="currentColor"
+            ></path>
+        </svg>
+    )
+}