Add spotlight search

packages/app-extension/src/app/Router.tsx

@@ -41,6 +41,7 @@ import {
 import { AuthenticatedSync } from "../components/Unlocked/AuthenticatedSync";
 import { WithAuth } from "../components/Unlocked/WithAuth";
 import { refreshFeatureGates } from "../gates/FEATURES";
+import { Spotlight } from "../spotlight/Spotlight";
 import { sanitizeTransactionWithFeeConfig } from "../utils/solana";
 
 import "./App.css";
@@ -58,6 +59,7 @@ export default function Router() {
           theme={isDarkMode ? "dark" : "light"}
         />
         <_Router />
+        <Spotlight />
       </>
     </WithSuspense>
   );

packages/app-extension/src/spotlight/ActionRow.tsx

@@ -0,0 +1,38 @@
+import { PushDetail } from "@coral-xyz/react-common";
+import { useCustomTheme } from "@coral-xyz/themes";
+
+import { SELECTED_BLUE } from "./colors";
+import { Line } from "./Line";
+
+export const ActionRow = ({
+  title,
+  onClick,
+  selected = false,
+}: {
+  title: string;
+  onClick: any;
+  selected?: boolean;
+}) => {
+  const theme = useCustomTheme();
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          padding: "20px 10px",
+          background: selected ? SELECTED_BLUE : "",
+          cursor: "pointer",
+        }}
+        onClick={onClick}
+      >
+        <div style={{ color: theme.custom.colors.fontColor }}>{title}</div>
+        <div>
+          <PushDetail />
+        </div>
+      </div>
+      <Line />
+    </div>
+  );
+};

packages/app-extension/src/spotlight/FriendCard.tsx

@@ -0,0 +1,120 @@
+import { useEffect,useState  } from "react";
+import {
+  NAV_COMPONENT_MESSAGE_CHAT,
+  NAV_COMPONENT_MESSAGE_PROFILE,
+  TAB_MESSAGES,
+  UI_RPC_METHOD_NAVIGATION_ACTIVE_TAB_UPDATE,
+} from "@coral-xyz/common";
+import { useBackgroundClient, useNavigation } from "@coral-xyz/recoil";
+
+import { ActionRow } from "./ActionRow";
+import { GroupIdentifier } from "./GroupIdentifier";
+import { SpotlightContact } from "./SpotlightContacts";
+
+export const FriendCard = ({
+  friend,
+  setOpen,
+}: {
+  friend: { username: string; image: string; uuid: string };
+  setOpen: any;
+}) => {
+  const [arrowIndex, setArrowIndex] = useState<number | null>(null);
+  const background = useBackgroundClient();
+  const { push, toRoot } = useNavigation();
+
+  useEffect(() => {
+    async function keyDownTextField(e: any) {
+      if (e.which === 38) {
+        setArrowIndex((x) => (x === null ? 0 : x - 1));
+      } else if (e.which === 40) {
+        setArrowIndex((x) => (x === null ? 0 : x + 1));
+      }
+      if ((e.key === "Enter" || e.key === "Return") && arrowIndex !== null) {
+        await toRoot();
+        await background.request({
+          method: UI_RPC_METHOD_NAVIGATION_ACTIVE_TAB_UPDATE,
+          params: [TAB_MESSAGES],
+        });
+        if (arrowIndex !== null && arrowIndex !== -1 && arrowIndex % 2 === 0) {
+          push({
+            title: `@${friend.username}`,
+            componentId: NAV_COMPONENT_MESSAGE_CHAT,
+            componentProps: {
+              userId: friend?.uuid,
+              id: friend?.uuid,
+              username: friend?.username,
+            },
+          });
+        } else {
+          push({
+            title: `@${friend?.username}`,
+            componentId: NAV_COMPONENT_MESSAGE_PROFILE,
+            componentProps: {
+              userId: friend?.uuid,
+            },
+          });
+        }
+        setOpen(false);
+      }
+    }
+    document.addEventListener("keydown", keyDownTextField);
+
+    return () => {
+      document.removeEventListener("keydown", keyDownTextField);
+    };
+  }, [arrowIndex, friend]);
+
+  return (
+    <div>
+      <GroupIdentifier name="Friends" />
+      <SpotlightContact
+        setSelectedContact={() => {}}
+        contact={friend}
+        selected={false}
+      />
+
+      <ActionRow
+        selected={(arrowIndex !== null && arrowIndex % 2) === 0}
+        title="Send a message"
+        onClick={async () => {
+          await toRoot();
+          await background.request({
+            method: UI_RPC_METHOD_NAVIGATION_ACTIVE_TAB_UPDATE,
+            params: [TAB_MESSAGES],
+          });
+
+          push({
+            title: `@${friend.username}`,
+            componentId: NAV_COMPONENT_MESSAGE_CHAT,
+            componentProps: {
+              userId: friend?.uuid,
+              id: friend?.uuid,
+              username: friend?.username,
+            },
+          });
+          setOpen(false);
+        }}
+      />
+      <ActionRow
+        selected={(arrowIndex !== null && arrowIndex % 2) === 1}
+        title="Go to profile"
+        onClick={async () => {
+          await toRoot();
+          await background.request({
+            method: UI_RPC_METHOD_NAVIGATION_ACTIVE_TAB_UPDATE,
+            params: [TAB_MESSAGES],
+          });
+
+          push({
+            title: `@${friend?.username}`,
+            componentId: NAV_COMPONENT_MESSAGE_PROFILE,
+            componentProps: {
+              userId: friend?.uuid,
+            },
+          });
+          setOpen(false);
+        }}
+      />
+    </div>
+  );
+};

packages/app-extension/src/spotlight/GroupIdentifier.tsx

@@ -0,0 +1,23 @@
+import { PushDetail } from "@coral-xyz/react-common";
+import { useCustomTheme } from "@coral-xyz/themes";
+
+import { ActionRow } from "./ActionRow";
+
+export const GroupIdentifier = ({ name }: { name: string }) => {
+  const theme = useCustomTheme();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginBottom: 4,
+      }}
+    >
+      <div style={{ color: theme.custom.colors.icon }}>{name}</div>
+      <div>
+        <PushDetail />
+      </div>
+    </div>
+  );
+};

packages/app-extension/src/spotlight/Line.tsx

@@ -0,0 +1,9 @@
+import { useCustomTheme } from "@coral-xyz/themes";
+
+export const Line = () => {
+  const theme = useCustomTheme();
+
+  return (
+    <div style={{ height: 1, background: theme.custom.colors.icon }} />
+  );
+};

packages/app-extension/src/spotlight/SearchBar.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { TextInput } from "@coral-xyz/react-common";
+import { useCustomTheme } from "@coral-xyz/themes";
+import SearchIcon from "@mui/icons-material/Search";
+
+import { useStyles } from "./styles";
+
+export const SpotlightSearchBar = ({
+  searchFilter,
+  setSearchFilter,
+}: {
+  searchFilter: string;
+  setSearchFilter: any;
+}) => {
+  const classes = useStyles();
+  const theme = useCustomTheme();
+
+  return (
+    <TextInput
+      autoFocus
+      className={classes.searchField}
+      placeholder="Search"
+      startAdornment={
+        <SearchIcon sx={{ color: theme.custom.colors.icon, mr: "10px" }} />
+      }
+      value={searchFilter}
+      setValue={async (e) => {
+        const prefix = e.target.value;
+        setSearchFilter(prefix);
+      }}
+      inputProps={{
+        style: {
+          height: "48px",
+        },
+      }}
+    />
+  );
+};

packages/app-extension/src/spotlight/SearchBody.tsx

@@ -0,0 +1,82 @@
+import { SpotlightContacts } from "./SpotlightContacts";
+import { SpotlightGroups } from "./SpotlightGroups";
+import { SpotlightNfts } from "./SpotlightNfts";
+import { SpotlightTokens } from "./SpotlightTokens";
+import { useSearchedContacts } from "./useSearchedContacts";
+import { useSearchedGroupsCollections } from "./useSearchedGroups";
+import { useSearchedNfts } from "./useSearchedNfts";
+import { useSearchedTokens } from "./useSearchedTokens";
+import { getCurrentCounter } from "./utils";
+
+export const SearchBody = ({
+  searchFilter,
+  arrowIndex,
+  setOpen,
+  setSelectedContact,
+}: {
+  searchFilter: string;
+  arrowIndex: number;
+  setOpen: any;
+  setSelectedContact: any;
+}) => {
+  const contacts = useSearchedContacts(searchFilter);
+  const groups = useSearchedGroupsCollections(searchFilter);
+  const nfts = useSearchedNfts(searchFilter);
+  const tokens = useSearchedTokens(searchFilter);
+  const allResultsLength =
+    contacts.length + groups.length + nfts.length + tokens.length;
+  const currentCounter = getCurrentCounter(arrowIndex, allResultsLength);
+
+  if (!searchFilter) return <div />;
+
+  return (
+    <div>
+      <div>
+        <SpotlightContacts
+          selectedIndex={
+            currentCounter < contacts.length ? currentCounter : null
+          }
+          contacts={contacts}
+          setSelectedContact={setSelectedContact}
+        />
+      </div>
+      <div style={{ marginTop: 10 }}>
+        <SpotlightGroups
+          selectedIndex={
+            currentCounter >= contacts.length &&
+            currentCounter < contacts.length + groups.length
+              ? currentCounter - contacts.length
+              : null
+          }
+          groups={groups}
+          setOpen={setOpen}
+        />
+      </div>
+      <div style={{ marginTop: 10 }}>
+        <SpotlightNfts
+          selectedIndex={
+            currentCounter >= contacts.length + groups.length &&
+            currentCounter < contacts.length + groups.length + nfts.length
+              ? currentCounter - contacts.length - groups.length
+              : null
+          }
+          nfts={nfts}
+          setOpen={setOpen}
+        />
+      </div>
+      <div style={{ marginTop: 10 }}>
+        <SpotlightTokens
+          selectedIndex={
+            currentCounter >= contacts.length + groups.length + nfts.length &&
+            currentCounter <
+              contacts.length + groups.length + nfts.length + tokens.length
+              ? currentCounter - contacts.length - groups.length - nfts.length
+              : null
+          }
+          tokens={tokens}
+          setOpen={setOpen}
+        />
+      </div>
+    </div>
+  );
+};