From 5efee32eeaa8e5e68db1b75e91a24c29b4159691 Mon Sep 17 00:00:00 2001
From: kawamataryo <ryo.kawamata0425@gmail.com>
Date: Wed, 11 Dec 2024 14:27:36 +0900
Subject: [PATCH] feat: add delete button

chore: fix design
---
 package.json                                |  2 +-
 src/lib/components/DetectedUserListItem.tsx |  7 ++
 src/lib/components/UserCard.tsx             | 72 +++++++++++++++------
 src/lib/hooks/useBskyUserManager.ts         |  8 +++
 src/options.tsx                             | 32 ++++++---
 5 files changed, 93 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 4659ba9..b6d094b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sky-follower-bridge",
-  "displayName": "__MSG_extension_name__",
+  "displayName": "Sky Follower Bridge",
   "version": "2.1.1",
   "description": "__MSG_extension_description__",
   "author": "kawamataryou",
diff --git a/src/lib/components/DetectedUserListItem.tsx b/src/lib/components/DetectedUserListItem.tsx
index 54cda82..4523fd7 100644
--- a/src/lib/components/DetectedUserListItem.tsx
+++ b/src/lib/components/DetectedUserListItem.tsx
@@ -14,6 +14,7 @@ export type Props = {
     accountName: string;
     displayName: string;
   }) => Promise<void>;
+  deleteUser: (did: string) => Promise<void>;
 };
 
 const DetectedUserListItem = ({
@@ -21,6 +22,7 @@ const DetectedUserListItem = ({
   actionMode,
   clickAction,
   reSearch,
+  deleteUser,
 }: Props) => {
   const [isBtnHovered, setIsBtnHovered] = React.useState(false);
   const [isJustClicked, setIsJustClicked] = React.useState(false);
@@ -100,6 +102,10 @@ const DetectedUserListItem = ({
     });
   };
 
+  const handleDeleteClick = () => {
+    deleteUser(user.did);
+  };
+
   const matchTypeColor = MATCH_TYPE_LABEL_AND_COLOR[user.matchType].color;
 
   return (
@@ -123,6 +129,7 @@ const DetectedUserListItem = ({
             setIsBtnHovered={setIsBtnHovered}
             setIsJustClicked={setIsJustClicked}
             handleReSearchClick={handleReSearchClick}
+            handleDeleteClick={handleDeleteClick}
           />
         </div>
       </div>
diff --git a/src/lib/components/UserCard.tsx b/src/lib/components/UserCard.tsx
index 136399f..85b5905 100644
--- a/src/lib/components/UserCard.tsx
+++ b/src/lib/components/UserCard.tsx
@@ -4,14 +4,33 @@ import ActionButton from "./ActionButton";
 import UserInfo from "./UserInfo";
 import UserProfile from "./UserProfile";
 
-export type UserCardProps = {
-  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 DeleteButton = ({
+  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="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
+  );
 };
 
 const ReSearchButton = ({
@@ -43,6 +62,17 @@ const ReSearchButton = ({
   );
 };
 
+export type UserCardProps = {
+  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;
+  handleDeleteClick: () => void;
+};
+
 const UserCard = ({
   user,
   loading,
@@ -51,6 +81,7 @@ const UserCard = ({
   setIsBtnHovered,
   setIsJustClicked,
   handleReSearchClick,
+  handleDeleteClick = () => {},
 }: UserCardProps) => {
   return (
     <div className="relative py-3 pt-1 pl-0 pr-2 grid grid-cols-[50px_1fr]">
@@ -59,23 +90,28 @@ const UserCard = ({
         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 justify-between items-start 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 className="card-actions flex items-center gap-6">
+            <div className="flex items-center gap-2">
+              <ReSearchButton onClick={handleReSearchClick} />
+              <DeleteButton onClick={handleDeleteClick} />
+            </div>
+            <div className="w-[170px]">
+              <ActionButton
+                loading={loading}
+                actionBtnLabelAndClass={actionBtnLabelAndClass}
+                handleActionButtonClick={handleActionButtonClick}
+                setIsBtnHovered={setIsBtnHovered}
+                setIsJustClicked={setIsJustClicked}
+              />
+            </div>
           </div>
         </div>
         <p className="text-sm break-all">{user.description}</p>
diff --git a/src/lib/hooks/useBskyUserManager.ts b/src/lib/hooks/useBskyUserManager.ts
index 47ee90b..b708f95 100644
--- a/src/lib/hooks/useBskyUserManager.ts
+++ b/src/lib/hooks/useBskyUserManager.ts
@@ -271,6 +271,13 @@ export const useBskyUserManager = () => {
     });
   }, []);
 
+  const deleteUser = React.useCallback(
+    async (did: string) => {
+      await setUsers((prev) => prev.filter((user) => user.did !== did));
+    },
+    [setUsers],
+  );
+
   const changeDetectedUser = React.useCallback(
     (fromDid: string, toUser: ProfileView) => {
       setUsers((prev) =>
@@ -305,5 +312,6 @@ export const useBskyUserManager = () => {
     reSearchResults,
     changeDetectedUser,
     clearReSearchResults,
+    deleteUser,
   };
 };
diff --git a/src/options.tsx b/src/options.tsx
index cf07844..17a72ed 100644
--- a/src/options.tsx
+++ b/src/options.tsx
@@ -5,6 +5,7 @@ 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 { AnimatePresence, motion } from "framer-motion";
 import React from "react";
 import ReSearchModal from "~components/ReSearchModal";
 import DetectedUserListItem from "~lib/components/DetectedUserListItem";
@@ -26,6 +27,7 @@ const Option = () => {
     reSearchResults,
     changeDetectedUser,
     clearReSearchResults,
+    deleteUser,
   } = useBskyUserManager();
 
   const {
@@ -175,15 +177,27 @@ const Option = () => {
             </h2>
           </div>
           <div className="flex flex-col border-b-[1px] border-gray-500">
-            {filteredUsers.map((user) => (
-              <DetectedUserListItem
-                key={user.handle}
-                user={user}
-                clickAction={handleClickAction}
-                actionMode={actionMode}
-                reSearch={handleReSearch}
-              />
-            ))}
+            <AnimatePresence>
+              {filteredUsers.map((user) => (
+                <motion.div
+                  key={user.did}
+                  layout
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <DetectedUserListItem
+                    key={user.handle}
+                    user={user}
+                    clickAction={handleClickAction}
+                    actionMode={actionMode}
+                    reSearch={handleReSearch}
+                    deleteUser={deleteUser}
+                  />
+                </motion.div>
+              ))}
+            </AnimatePresence>
           </div>
         </div>
         <div className="fixed bottom-5 right-5">