refactor: fix directory structure

.storybook/main.ts

@@ -1,4 +1,6 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import path from "node:path";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -13,15 +15,17 @@ const config: StorybookConfig = {
     name: "@storybook/react-vite",
     options: {},
   },
-  viteFinal: (config) => {
-    config.define = {
-      ...config.define,
-      "process.env": process.env,
-      esbuild: {
-        jsx: "automatic",
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          "~": path.resolve(__dirname, "../src/"),
+        },
       },
-    };
-    return config;
+      define: {
+        "process.env": {}
+      },
+    });
   },
   typescript: {
     reactDocgen: "react-docgen-typescript",

src/lib/components/DetectedUserListItem.stories.tsx → src/components/DetectedUserListItem.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { ACTION_MODE, BSKY_USER_MATCH_TYPE } from "../constants";
+import { ACTION_MODE, BSKY_USER_MATCH_TYPE } from "~lib/constants";
 import DetectedUserListItem, { type Props } from "./DetectedUserListItem";
 
 const meta: Meta<typeof DetectedUserListItem> = {

src/lib/components/DetectedUserListItem.tsx → src/components/DetectedUserListItem.tsx

@@ -1,8 +1,8 @@
 import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import React from "react";
 import { match } from "ts-pattern";
+import { ACTION_MODE, MATCH_TYPE_LABEL_AND_COLOR } from "~lib/constants";
 import type { BskyUser } from "~types";
-import { ACTION_MODE, MATCH_TYPE_LABEL_AND_COLOR } from "../constants";
 import DetectedUserSource from "./DetectedUserSource";
 import UserCard from "./UserCard";
 export type Props = {

src/components/ReSearchModal.tsx

@@ -1,6 +1,6 @@
 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";
+import Modal from "components/Modal";
+import UserCardWithoutActionButton from "components/UserCardWithoutActionButton";
 
 interface ReSearchModalProps {
   open: boolean;

src/lib/components/Sidebar.stories.tsx → src/components/Sidebar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ACTION_MODE, BSKY_USER_MATCH_TYPE } from "../constants";
+import { ACTION_MODE, BSKY_USER_MATCH_TYPE } from "~lib/constants";
 import Sidebar from "./Sidebar";
 
 const meta = {

src/lib/components/Sidebar.tsx → src/components/Sidebar.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { match } from "ts-pattern";
-import { getMessageWithLink } from "~lib/utils";
-import type { MatchType, MatchTypeFilterValue } from "../../types";
 import {
   ACTION_MODE,
   BSKY_USER_MATCH_TYPE,
   MATCH_TYPE_LABEL_AND_COLOR,
-} from "../constants";
+} from "~lib/constants";
+import { getMessageWithLink } from "~lib/utils";
+import type { MatchType, MatchTypeFilterValue } from "~types";
 import AsyncButton from "./AsyncButton";
 import SocialLinks from "./SocialLinks";
 

src/lib/components/UserCard.stories.tsx → src/components/UserCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { BSKY_USER_MATCH_TYPE } from "../constants";
+import { BSKY_USER_MATCH_TYPE } from "~lib/constants";
 import UserCard, { type UserCardProps } from "./UserCard";
 
 const meta: Meta<typeof UserCard> = {
@@ -46,6 +46,8 @@ const CardTemplate = {
       handleActionButtonClick={() => {}}
       setIsBtnHovered={() => {}}
       setIsJustClicked={() => {}}
+      handleReSearchClick={() => {}}
+      handleDeleteClick={() => {}}
     />
   ),
 };
@@ -63,6 +65,8 @@ const CardsTemplate: Story = {
           handleActionButtonClick={() => {}}
           setIsBtnHovered={() => {}}
           setIsJustClicked={() => {}}
+          handleReSearchClick={() => {}}
+          handleDeleteClick={() => {}}
         />
       ))}
     </div>

src/contents/App.tsx

@@ -5,11 +5,11 @@ import { useStorage } from "@plasmohq/storage/hook";
 import type { PlasmoCSConfig } from "plasmo";
 import React from "react";
 import { match } from "ts-pattern";
-import AlertError from "~lib/components/AlertError";
-import LoadingCards from "~lib/components/LoadingCards";
-import Modal from "~lib/components/Modal";
+import AlertError from "~components/AlertError";
+import LoadingCards from "~components/LoadingCards";
+import Modal from "~components/Modal";
+import { useRetrieveBskyUsers } from "~hooks/useRetrieveBskyUsers";
 import { MESSAGE_NAMES, SERVICE_TYPE, STORAGE_KEYS } from "~lib/constants";
-import { useRetrieveBskyUsers } from "~lib/hooks/useRetrieveBskyUsers";
 
 export const config: PlasmoCSConfig = {
   matches: [

src/lib/hooks/useRetrieveBskyUsers.ts → src/hooks/useRetrieveBskyUsers.ts

@@ -7,10 +7,10 @@ import { BskyServiceWorkerClient } from "~lib/bskyServiceWorkerClient";
 import { getChromeStorage } from "~lib/chromeHelper";
 import { MESSAGE_NAMES, SERVICE_TYPE, STORAGE_KEYS } from "~lib/constants";
 import { searchBskyUser } from "~lib/searchBskyUsers";
-import { InstagramService } from "~lib/services/instagramService";
-import { ThreadsService } from "~lib/services/threadsService";
-import { XService } from "~lib/services/xService";
 import { wait } from "~lib/utils";
+import { InstagramService } from "~services/instagramService";
+import { ThreadsService } from "~services/threadsService";
+import { XService } from "~services/xService";
 import type {
   BskyUser,
   CrawledUserInfo,

src/options.tsx

@@ -1,16 +1,15 @@
-import { useBskyUserManager } from "~lib/hooks/useBskyUserManager";
+import { useBskyUserManager } from "~hooks/useBskyUserManager";
 import "./style.css";
 import { ToastContainer, toast } from "react-toastify";
-import useConfirm from "~lib/components/ConfirmDialog";
-import Sidebar from "~lib/components/Sidebar";
+import useConfirm from "~components/ConfirmDialog";
+import Sidebar from "~components/Sidebar";
 import "react-toastify/dist/ReactToastify.css";
 import type { ProfileView } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { AnimatePresence, motion } from "framer-motion";
 import React from "react";
+import DetectedUserListItem from "~components/DetectedUserListItem";
+import DonationCard from "~components/DonationCard";
 import ReSearchModal from "~components/ReSearchModal";
-import DetectedUserListItem from "~lib/components/DetectedUserListItem";
-import DonationCard from "~lib/components/DonationCard";
 
 const Option = () => {
   const {

src/popup.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import packageJson from "../package.json";
 
 import "./style.css";
@@ -7,9 +6,8 @@ import { AuthForm } from "~components/popup/AuthForm";
 import { ErrorMessage } from "~components/popup/ErrorMessage";
 import { Header } from "~components/popup/Header";
 import { SearchForm } from "~components/popup/SearchForm";
-import { MESSAGE_TYPE } from "~lib/constants";
-import { useAuth } from "~lib/hooks/useAuth";
-import { useSearch } from "~lib/hooks/useSearch";
+import { useAuth } from "~hooks/useAuth";
+import { useSearch } from "~hooks/useSearch";
 
 function IndexPopup() {
   const {