feat: add search again button

2025-04-25 12:52:23 -06:00 · 2024-11-30 20:44:12 +09:00 · 2024-11-30 20:44:12 +09:00 · 29cf178791
commit 29cf178791
parent 4383913ed5
14 changed files with 442 additions and 106 deletions
--- a/src/components/ReSearchModal.tsx
+++ b/src/components/ReSearchModal.tsx
@ -0,0 +1,63 @@
+import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import Modal from "~lib/components/Modal";
+import UserCardWithoutActionButton from "~lib/components/UserCardWithoutActionButton";
+
+interface ReSearchModalProps {
+  open: boolean;
+  onClose: () => void;
+  reSearchResults: {
+    sourceDid: string;
+    users: ProfileView[];
+  };
+  handleClickReSearchResult: ({
+    sourceDid,
+    user,
+  }: {
+    sourceDid: string;
+    user: ProfileView;
+  }) => void;
+}
+
+const ReSearchModal: React.FC<ReSearchModalProps> = ({
+  open,
+  onClose,
+  reSearchResults,
+  handleClickReSearchResult,
+}) => {
+  return (
+    <Modal open={open} width={600} onClose={onClose}>
+      <h2 className="text-lg font-bold text-center py-2">Search Results</h2>
+      {reSearchResults.users.length === 0 && (
+        <div className="text-center flex justify-center items-center flex-col gap-4 mt-5">
+          <span className="loading loading-spinner loading-lg" />
+          <div className="text-center flex justify-center items-center text-sm">
+            Loading...
+          </div>
+        </div>
+      )}
+      {reSearchResults.users.length > 0 && (
+        <div className="divide-y divide-gray-500">
+          {reSearchResults.users.map((user) => (
+            <UserCardWithoutActionButton
+              key={user.handle}
+              onClick={() =>
+                handleClickReSearchResult({
+                  sourceDid: reSearchResults.sourceDid,
+                  user,
+                })
+              }
+              user={{
+                avatar: user.avatar,
+                handle: user.handle,
+                displayName: user.displayName,
+                description: user.description,
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default ReSearchModal;
--- a/src/lib/bskyHelpers.ts
+++ b/src/lib/bskyHelpers.ts
@ -1,5 +1,5 @@
 import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
-import { BSKY_USER_MATCH_TYPE } from "./constants";
+import { BSKY_PROFILE_LABEL, BSKY_USER_MATCH_TYPE } from "./constants";

 type xUserInfo = {
  bskyHandleInDescription: string;
@ -80,3 +80,9 @@ export const isSimilarUser = (
    type: BSKY_USER_MATCH_TYPE.NONE,
  };
 };
+
+export const isImpersonationUser = (user: ProfileView) => {
+  return user.labels.some(
+    (label) => label.val === BSKY_PROFILE_LABEL.IMPERSONATION,
+  );
+};
--- a/src/lib/components/ActionButton.tsx
+++ b/src/lib/components/ActionButton.tsx
@ -0,0 +1,35 @@
+import React from "react";
+
+type ActionButtonProps = {
+  loading: boolean;
+  actionBtnLabelAndClass: { label: string; class: string };
+  handleActionButtonClick: () => void;
+  setIsBtnHovered: (value: boolean) => void;
+  setIsJustClicked: (value: boolean) => void;
+};
+
+export const ActionButton = ({
+  loading,
+  actionBtnLabelAndClass,
+  handleActionButtonClick,
+  setIsBtnHovered,
+  setIsJustClicked,
+}: ActionButtonProps) => (
+  <button
+    type="button"
+    className={`btn btn-sm rounded-3xl ${
+      loading ? "" : actionBtnLabelAndClass.class
+    }`}
+    onClick={handleActionButtonClick}
+    onMouseEnter={() => setIsBtnHovered(true)}
+    onMouseLeave={() => {
+      setIsBtnHovered(false);
+      setIsJustClicked(false);
+    }}
+    disabled={loading}
+  >
+    {loading ? "Processing..." : actionBtnLabelAndClass.label}
+  </button>
+);
+
+export default ActionButton;
--- a/src/lib/components/DetectedUserListItem.tsx
+++ b/src/lib/components/DetectedUserListItem.tsx
@ -1,3 +1,4 @@
+import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import React from "react";
 import { match } from "ts-pattern";
 import type { BskyUser } from "~types";
@ -8,9 +9,19 @@ export type Props = {
  user: BskyUser;
  actionMode: (typeof ACTION_MODE)[keyof typeof ACTION_MODE];
  clickAction: (user: BskyUser) => Promise<void>;
+  reSearch: (user: {
+    sourceDid: string;
+    accountName: string;
+    displayName: string;
+  }) => Promise<void>;
 };

-const DetectedUserListItem = ({ user, actionMode, clickAction }: Props) => {
+const DetectedUserListItem = ({
+  user,
+  actionMode,
+  clickAction,
+  reSearch,
+}: Props) => {
  const [isBtnHovered, setIsBtnHovered] = React.useState(false);
  const [isJustClicked, setIsJustClicked] = React.useState(false);
  const actionBtnLabelAndClass = React.useMemo(
@ -81,6 +92,14 @@ const DetectedUserListItem = ({ user, actionMode, clickAction }: Props) => {
    setIsJustClicked(true);
  };

+  const handleReSearchClick = () => {
+    reSearch({
+      sourceDid: user.did,
+      accountName: user.originalHandle,
+      displayName: user.originalDisplayName,
+    });
+  };
+
  return (
    <div className="bg-base-100 w-full relative grid grid-cols-[22%_1fr] gap-5">
      <DetectedUserSource user={user} />
@ -91,6 +110,7 @@ const DetectedUserListItem = ({ user, actionMode, clickAction }: Props) => {
        handleActionButtonClick={handleActionButtonClick}
        setIsBtnHovered={setIsBtnHovered}
        setIsJustClicked={setIsJustClicked}
+        handleReSearchClick={handleReSearchClick}
      />
    </div>
  );
--- a/src/lib/components/DetectedUserSource.tsx
+++ b/src/lib/components/DetectedUserSource.tsx
@ -1,7 +1,9 @@
+import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import React from "react";
 import type { BskyUser } from "~types";
 import { MATCH_TYPE_LABEL_AND_COLOR } from "../constants";
-import { UserInfo, UserProfile } from "./UserCard";
+import UserInfo from "./UserInfo";
+import UserProfile from "./UserProfile";

 type DetectedUserSourceProps = {
  user: BskyUser;
--- a/src/lib/components/Modal.tsx
+++ b/src/lib/components/Modal.tsx
@ -5,9 +5,10 @@ export type Props = {
  children: React.ReactNode;
  open: boolean;
  onClose?: () => void;
+  width?: number;
 };

-const Modal = ({ children, open = false, onClose }: Props) => {
+const Modal = ({ children, open = false, onClose, width = 500 }: Props) => {
  const anchorRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
@ -25,7 +26,10 @@ const Modal = ({ children, open = false, onClose }: Props) => {
  return (
    <>
      <dialog className="modal" ref={anchorRef} open={open}>
-        <div className="modal-box p-10 bg-base-100 w-[500px] max-w-none text-base-content">
+        <div
+          className="modal-box p-10 bg-base-100 max-w-none text-base-content"
+          style={{ width }}
+        >
          {children}
        </div>
        <form method="dialog" className="modal-backdrop">
--- a/src/lib/components/UserCard.tsx
+++ b/src/lib/components/UserCard.tsx
@ -1,81 +1,46 @@
 import React from "react";
 import type { BskyUser } from "~types";
-import AvatarFallbackSvg from "./Icons/AvatarFallbackSvg";
+import ActionButton from "./ActionButton";
+import UserInfo from "./UserInfo";
+import UserProfile from "./UserProfile";

-type UserProfileProps = {
-  avatar: string;
-  url: string;
-};
-
-export const UserProfile = ({ avatar, url }: UserProfileProps) => (
-  <div className="avatar">
-    <div className="w-10 h-10 rounded-full border border-white">
-      <a href={url} target="_blank" rel="noreferrer">
-        {avatar ? <img src={avatar} alt="" /> : <AvatarFallbackSvg />}
-      </a>
-    </div>
-  </div>
-);
-
-type UserInfoProps = {
-  handle: string;
-  displayName: string;
-  url: string;
-};
-
-export const UserInfo = ({ handle, displayName, url }: UserInfoProps) => (
-  <div>
-    <h2 className="card-title break-all text-[1.1rem] font-bold">
-      <a href={url} target="_blank" rel="noreferrer">
-        {displayName}
-      </a>
-    </h2>
-    <p className="w-fit break-all text-gray-500 dark:text-gray-400 text-sm">
-      <a href={url} target="_blank" rel="noreferrer" className="break-all">
-        @{handle}
-      </a>
-    </p>
-  </div>
-);
-
-type ActionButtonProps = {
-  loading: boolean;
-  actionBtnLabelAndClass: { label: string; class: string };
-  handleActionButtonClick: () => void;
-  setIsBtnHovered: (value: boolean) => void;
-  setIsJustClicked: (value: boolean) => void;
-};
-
-export const ActionButton = ({
-  loading,
-  actionBtnLabelAndClass,
-  handleActionButtonClick,
-  setIsBtnHovered,
-  setIsJustClicked,
-}: ActionButtonProps) => (
-  <button
-    type="button"
-    className={`btn btn-sm rounded-3xl ${
-      loading ? "" : actionBtnLabelAndClass.class
-    }`}
-    onClick={handleActionButtonClick}
-    onMouseEnter={() => setIsBtnHovered(true)}
-    onMouseLeave={() => {
-      setIsBtnHovered(false);
-      setIsJustClicked(false);
-    }}
-    disabled={loading}
-  >
-    {loading ? "Processing..." : actionBtnLabelAndClass.label}
-  </button>
-);
 export type UserCardProps = {
-  user: BskyUser;
+  user: Pick<BskyUser, "avatar" | "handle" | "displayName" | "description">;
  loading: boolean;
  actionBtnLabelAndClass: { label: string; class: string };
  handleActionButtonClick: () => void;
  setIsBtnHovered: (value: boolean) => void;
  setIsJustClicked: (value: boolean) => void;
+  handleReSearchClick: () => void;
+};
+
+const ReSearchButton = ({
+  onClick,
+}: {
+  onClick: () => void;
+}) => {
+  return (
+    <button
+      type="button"
+      className="btn-outline w-7 h-7 border rounded-full flex items-center justify-center"
+      onClick={onClick}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="h-4 w-4"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+        />
+      </svg>
+    </button>
+  );
 };

 const UserCard = ({
@ -85,32 +50,38 @@ const UserCard = ({
  handleActionButtonClick,
  setIsBtnHovered,
  setIsJustClicked,
-}: UserCardProps) => (
-  <div className="relative py-3 pl-0 pr-2 grid grid-cols-[50px_1fr]">
-    <UserProfile
-      avatar={user.avatar}
-      url={`https://bsky.app/profile/${user.handle}`}
-    />
-    <div className="flex flex-col gap-2">
-      <div className="flex justify-between items-center gap-2">
-        <UserInfo
-          handle={user.handle}
-          displayName={user.displayName}
-          url={`https://bsky.app/profile/${user.handle}`}
-        />
-        <div className="card-actions">
-          <ActionButton
-            loading={loading}
-            actionBtnLabelAndClass={actionBtnLabelAndClass}
-            handleActionButtonClick={handleActionButtonClick}
-            setIsBtnHovered={setIsBtnHovered}
-            setIsJustClicked={setIsJustClicked}
-          />
+  handleReSearchClick,
+}: UserCardProps) => {
+  return (
+    <div className="relative py-3 pl-0 pr-2 grid grid-cols-[50px_1fr]">
+      <UserProfile
+        avatar={user.avatar}
+        url={`https://bsky.app/profile/${user.handle}`}
+      />
+      <div className="flex flex-col gap-2">
+        <div className="flex justify-between items-center gap-2">
+          <div className="flex items-start gap-4">
+            <UserInfo
+              handle={user.handle}
+              displayName={user.displayName}
+              url={`https://bsky.app/profile/${user.handle}`}
+            />
+            <ReSearchButton onClick={handleReSearchClick} />
+          </div>
+          <div className="card-actions flex items-center gap-4">
+            <ActionButton
+              loading={loading}
+              actionBtnLabelAndClass={actionBtnLabelAndClass}
+              handleActionButtonClick={handleActionButtonClick}
+              setIsBtnHovered={setIsBtnHovered}
+              setIsJustClicked={setIsJustClicked}
+            />
+          </div>
        </div>
+        <p className="text-sm break-all">{user.description}</p>
      </div>
-      <p className="text-sm break-all">{user.description}</p>
    </div>
-  </div>
-);
+  );
+};

 export default UserCard;
--- a/src/lib/components/UserCardWithoutActionButton.tsx
+++ b/src/lib/components/UserCardWithoutActionButton.tsx
@ -0,0 +1,31 @@
+import React from "react";
+import type { BskyUser } from "~types";
+import UserInfo from "./UserInfo";
+import UserProfile from "./UserProfile";
+
+export type UserCardWithoutActionButtonProps = {
+  user: Pick<BskyUser, "avatar" | "handle" | "displayName" | "description">;
+  onClick: () => void;
+};
+
+const UserCardWithoutActionButton = ({
+  user,
+  onClick,
+}: UserCardWithoutActionButtonProps) => (
+  <button
+    type="button"
+    className="relative py-3 pl-0 pr-2 grid grid-cols-[50px_1fr] w-full"
+    onClick={onClick}
+    onKeyUp={onClick}
+  >
+    <UserProfile avatar={user.avatar} />
+    <div className="flex flex-col gap-2">
+      <div className="flex justify-between items-center gap-2">
+        <UserInfo handle={user.handle} displayName={user.displayName} />
+      </div>
+      <p className="text-sm break-all text-left">{user.description}</p>
+    </div>
+  </button>
+);
+
+export default UserCardWithoutActionButton;
--- a/src/lib/components/UserInfo.tsx
+++ b/src/lib/components/UserInfo.tsx
@ -0,0 +1,28 @@
+import React from "react";
+
+type UserInfoProps = {
+  handle: string;
+  displayName: string;
+  url?: string;
+};
+
+export const UserInfo = ({ handle, displayName, url }: UserInfoProps) => (
+  <div>
+    <h2 className="card-title break-all text-[1.1rem] font-bold">
+      {url ? (
+        <a href={url} target="_blank" rel="noreferrer">
+          {displayName}
+        </a>
+      ) : (
+        <>{displayName}</>
+      )}
+    </h2>
+    <p className="w-fit break-all text-gray-500 dark:text-gray-400 text-sm">
+      <a href={url} target="_blank" rel="noreferrer" className="break-all">
+        @{handle}
+      </a>
+    </p>
+  </div>
+);
+
+export default UserInfo;
--- a/src/lib/components/UserProfile.tsx
+++ b/src/lib/components/UserProfile.tsx
@ -0,0 +1,25 @@
+import React from "react";
+import AvatarFallbackSvg from "./Icons/AvatarFallbackSvg";
+
+type UserProfileProps = {
+  avatar: string;
+  url?: string;
+};
+
+export const UserProfile = ({ avatar, url }: UserProfileProps) => (
+  <div className="avatar">
+    <div className="w-10 h-10 rounded-full border border-white">
+      {url ? (
+        <a href={url} target="_blank" rel="noreferrer">
+          {avatar ? <img src={avatar} alt="" /> : <AvatarFallbackSvg />}
+        </a>
+      ) : (
+        <div className="w-10 h-10 rounded-full border border-white">
+          {avatar ? <img src={avatar} alt="" /> : <AvatarFallbackSvg />}
+        </div>
+      )}
+    </div>
+  </div>
+);
+
+export default UserProfile;
--- a/src/lib/hooks/useBskyUserManager.ts
+++ b/src/lib/hooks/useBskyUserManager.ts
@ -1,3 +1,4 @@
+import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import { Storage } from "@plasmohq/storage";
 import { useStorage } from "@plasmohq/storage/hook";
 import React from "react";
@ -9,6 +10,7 @@ import {
  MESSAGE_NAME_TO_ACTION_MODE_MAP,
  STORAGE_KEYS,
 } from "~lib/constants";
+import { reSearchBskyUser } from "~lib/reSearchBskyUsers";
 import { wait } from "~lib/utils";
 import type { BskyUser, MatchType } from "~types";

@ -242,6 +244,58 @@ export const useBskyUserManager = () => {
    );
  }, [users, matchTypeFilter]);

+  const [reSearchResults, setReSearchResults] = React.useState<{
+    sourceDid: string;
+    users: ProfileView[];
+  }>({ sourceDid: "", users: [] });
+  const reSearch = React.useCallback(
+    async ({
+      sourceDid,
+      accountName,
+      displayName,
+    }: {
+      sourceDid: string;
+      accountName: string;
+      displayName: string;
+    }) => {
+      const searchResults = await reSearchBskyUser({
+        client: bskyClient.current,
+        userData: {
+          accountName,
+          displayName,
+        },
+      });
+      setReSearchResults({ sourceDid, users: searchResults });
+    },
+    [],
+  );
+
+  const clearReSearchResults = React.useCallback(() => {
+    setReSearchResults({
+      sourceDid: "",
+      users: [],
+    });
+  }, []);
+
+  const changeDetectedUser = React.useCallback(
+    (fromDid: string, toUser: ProfileView) => {
+      setUsers((prev) =>
+        prev.map((prevUser) =>
+          prevUser.did === fromDid
+            ? {
+                ...prevUser,
+                ...toUser,
+                isFollowing: !!toUser.viewer?.following,
+                followingUri: toUser.viewer?.following,
+                isBlocking: !!toUser.viewer?.blocking,
+                blockingUri: toUser.viewer?.blocking,
+              }
+            : prevUser,
+        ),
+      );
+    },
+    [setUsers],
+  );
  return {
    handleClickAction,
    users,
@ -253,5 +307,9 @@ export const useBskyUserManager = () => {
    importList,
    followAll,
    blockAll,
+    reSearch,
+    reSearchResults,
+    changeDetectedUser,
+    clearReSearchResults,
  };
 };
--- a/src/lib/reSearchBskyUsers.ts
+++ b/src/lib/reSearchBskyUsers.ts
@ -0,0 +1,55 @@
+import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { isOneSymbol } from "~lib/utils";
+import { isImpersonationUser } from "./bskyHelpers";
+import type { BskyServiceWorkerClient } from "./bskyServiceWorkerClient";
+
+export const reSearchBskyUser = async ({
+  client,
+  userData,
+}: {
+  client: BskyServiceWorkerClient;
+  userData: {
+    accountName: string;
+    displayName: string;
+  };
+}): Promise<ProfileView[]> => {
+  const searchTerms = [
+    userData.accountName,
+    userData.displayName,
+    userData.accountName.replaceAll("_", ""),
+    userData.displayName.replaceAll("_", ""),
+  ];
+  const uniqueSearchTerms = new Set(searchTerms);
+
+  const searchResultDidSet = new Set<string>();
+  const searchResults: ProfileView[] = [];
+
+  for (const term of uniqueSearchTerms) {
+    // one symbol is not a valid search term for bsky
+    if (!term || isOneSymbol(term)) {
+      continue;
+    }
+    try {
+      const results = await client.searchUser({
+        term,
+        limit: 3,
+      });
+
+      for (const result of results) {
+        // skip impersonation users
+        if (isImpersonationUser(result)) {
+          continue;
+        }
+        if (searchResultDidSet.has(result.did)) {
+          continue;
+        }
+        searchResultDidSet.add(result.did);
+        searchResults.push(result);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  return searchResults;
+};
--- a/src/lib/searchBskyUsers.ts
+++ b/src/lib/searchBskyUsers.ts
@ -1,15 +1,8 @@
-import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import { isSimilarUser } from "~lib/bskyHelpers";
 import { isOneSymbol } from "~lib/utils";
 import type { CrawledUserInfo } from "~types";
+import { isImpersonationUser } from "./bskyHelpers";
 import type { BskyServiceWorkerClient } from "./bskyServiceWorkerClient";
-import { BSKY_PROFILE_LABEL } from "./constants";
-
-const isImpersonationUser = (user: ProfileView) => {
-  return user.labels.some(
-    (label) => label.val === BSKY_PROFILE_LABEL.IMPERSONATION,
-  );
-};

 export const searchBskyUser = async ({
  client,
--- a/src/options.tsx
+++ b/src/options.tsx
@ -4,6 +4,9 @@ import { ToastContainer, toast } from "react-toastify";
 import useConfirm from "~lib/components/ConfirmDialog";
 import Sidebar from "~lib/components/Sidebar";
 import "react-toastify/dist/ReactToastify.css";
+import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import React from "react";
+import ReSearchModal from "~components/ReSearchModal";
 import DetectedUserListItem from "~lib/components/DetectedUserListItem";

 const Option = () => {
@ -18,6 +21,10 @@ const Option = () => {
    importList,
    followAll,
    blockAll,
+    reSearch,
+    reSearchResults,
+    changeDetectedUser,
+    clearReSearchResults,
  } = useBskyUserManager();

  const {
@ -98,6 +105,37 @@ const Option = () => {
    });
  };

+  const [showReSearchModal, setShowReSearchModal] = React.useState(false);
+  const handleReSearch = async (user: {
+    sourceDid: string;
+    accountName: string;
+    displayName: string;
+  }) => {
+    reSearch({
+      sourceDid: user.sourceDid,
+      accountName: user.accountName,
+      displayName: user.displayName,
+    });
+    setShowReSearchModal(true);
+  };
+
+  const handleClickReSearchResult = ({
+    sourceDid,
+    user,
+  }: {
+    sourceDid: string;
+    user: ProfileView;
+  }) => {
+    changeDetectedUser(sourceDid, user);
+    setShowReSearchModal(false);
+    clearReSearchResults();
+  };
+
+  const handleCloseReSearchModal = () => {
+    setShowReSearchModal(false);
+    clearReSearchResults();
+  };
+
  return (
    <>
      <div className="flex h-screen">
@ -126,11 +164,18 @@ const Option = () => {
                  user={user}
                  clickAction={handleClickAction}
                  actionMode={actionMode}
+                  reSearch={handleReSearch}
                />
              ))}
            </div>
          </div>
        </div>
+        <ReSearchModal
+          open={showReSearchModal}
+          onClose={handleCloseReSearchModal}
+          reSearchResults={reSearchResults}
+          handleClickReSearchResult={handleClickReSearchResult}
+        />
        <ToastContainer
          position="top-right"
          autoClose={5000}