fix: conflicts

apps/extension/package.json

@@ -52,4 +52,4 @@
       "http://localhost:3000/"
     ]
   }
-}
+}

apps/extension/contents/translate.tsx → apps/extension/src/contents/translate.tsx

@@ -1,16 +1,14 @@
 import FloatingButton from "~features/translate/components/FlaotingButton"
 import { PopoverContext, useContextPopover, usePopover } from "~features/translate/context/popover"
-import { TRPCProvider } from "~options/providers/trpc-provider"
 
-import "@wordigo/ui/styles/globals.css"
+import "~/styles/globals.css"
 
-import { Portal } from "@radix-ui/react-portal"
-import styleText from "data-text:@wordigo/ui/styles/globals.css"
+import styleText from "data-text:~/styles/globals.css"
 import type { PlasmoCSConfig } from "plasmo"
 import { Fragment } from "react"
 
-import { Toaster } from "~../../packages/ui"
 import TranslatePopup from "~features/translate/components/TranslatePopup"
+import Provider from "~providers"
 
 export const config: PlasmoCSConfig = {
   matches: ["<all_urls>"],
@@ -40,14 +38,11 @@ Translate.Layout = () => {
   const popover = usePopover({})
 
   return (
-    <Portal>
-      <Toaster />
+    <Provider>
       <PopoverContext.Provider value={popover}>
-        <TRPCProvider>
-          <Translate />
-        </TRPCProvider>
+        <Translate />
       </PopoverContext.Provider>
-    </Portal>
+    </Provider>
   )
 }
 

apps/extension/src/features/translate/components/DictionarySelector.tsx

@@ -0,0 +1,109 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Skeleton,
+  ToastAction,
+  useToast
+} from "@wordigo/ui"
+import { ChevronDown, RotateCw } from "lucide-react"
+import { Fragment, useEffect, useState } from "react"
+
+import { sendToBackground } from "@plasmohq/messaging"
+
+import trpc from "~libs/trpc"
+
+import { useContextPopover } from "../context/popover"
+
+const DictionarySelector = ({ sourceLangauge, translatedText }: { sourceLangauge: string; translatedText: string }) => {
+  const { targetLanguage, selectedText } = useContextPopover()
+  const { mutate, data, isLoading } = trpc.dictionary.getUserDictionariesMutation.useMutation()
+  const { mutate: addMutate, isLoading: addIsLoading, status } = trpc.word.addWord.useMutation()
+  const [showMenu, setShowMenu] = useState(false)
+  const { toast } = useToast()
+
+  const handleOpenMenu = async () => {
+    const targetValue = !showMenu
+
+    if (targetValue) {
+      const token = await sendToBackground({
+        name: "getToken"
+      })
+      if (token) {
+        setShowMenu(true)
+        mutate()
+      } else {
+        toast({
+          title: "You need to login..",
+          description: "You need to be logged in to add words to your dictionary.",
+          action: <ToastAction altText="Logi">Login</ToastAction>
+        })
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (status === "success") {
+      toast({
+        title: "Successful",
+        description: "Word insertion successful.",
+        action: <ToastAction altText="View Dictionary">View Dictionary</ToastAction>
+      })
+    }
+  }, [status])
+
+  const handleAddLibrary = (dictionaryId: string) => {
+    setShowMenu(false)
+    addMutate({ dictionaryId, nativeLanguage: sourceLangauge, targetLanguage, text: selectedText, translatedText })
+  }
+
+  return (
+    <DropdownMenu open={showMenu} onOpenChange={handleOpenMenu} data-theme="dark">
+      <DropdownMenuTrigger asChild className="w-[180px]">
+        <Button
+          variant="outline"
+          size="default"
+          className="rounded-md !h-9 !w-26 !px-3 flex justify-between items-center gap-x-2"
+          disabled={addIsLoading}>
+          {!addIsLoading ? (
+            <Fragment>
+              Dictionary
+              <ChevronDown size={14} />
+            </Fragment>
+          ) : (
+            <div className="flex justify-between items-center w-full">
+              Please wait
+              <RotateCw className="mr-2 h-4 w-4 animate-spin" />
+            </div>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-[180px] border-0" data-theme="dark" id="el-popup-container">
+        {isLoading ? (
+          <DictionarySelector.Loader />
+        ) : (
+          data?.data?.map((item) => (
+            <DropdownMenuItem onClick={() => handleAddLibrary(item.id)} key={item.id}>
+              {item.title}
+            </DropdownMenuItem>
+          ))
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+DictionarySelector.Loader = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <Skeleton className="h-5 w-full rounded" />
+      <Skeleton className="h-5 w-full rounded" />
+      <Skeleton className="h-5 w-full rounded" />
+      <Skeleton className="h-5 w-full rounded" />
+    </div>
+  )
+}
+
+export default DictionarySelector

apps/extension/features/translate/components/FlaotingButton.tsx → apps/extension/src/features/translate/components/FlaotingButton.tsx

@@ -20,7 +20,8 @@ const FloatingButton = () => {
       <Tooltip>
         <TooltipTrigger asChild>
           <motion.div
-            className="absolute cursor-pointer"
+            tabIndex={50}
+            className="absolute cursor-pointer z-50"
             initial={{
               top: top - 5,
               left

apps/extension/features/translate/components/LanguageSelector.tsx → apps/extension/src/features/translate/components/LanguageSelector.tsx

@@ -1,10 +1,9 @@
 import { AllCountryLanguages, type ILanguage } from "@wordigo/common"
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, ScrollArea } from "@wordigo/ui"
 import { ChevronDown } from "lucide-react"
 import { useState } from "react"
 import ReactCountryFlag from "react-country-flag"
 
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, ScrollArea } from "~../../packages/ui"
-
 export interface ILanguageSelector {
   supportLanguages?: boolean
   className?: string

apps/extension/features/translate/components/TranslatePopup.tsx → apps/extension/src/features/translate/components/TranslatePopup.tsx

@@ -1,3 +1,4 @@
+import { AllCountryLanguages } from "@wordigo/common"
 import {
   Button,
   Card,
@@ -13,24 +14,26 @@ import {
 } from "@wordigo/ui"
 import { motion } from "framer-motion"
 import { ArrowRightLeft, Copy, Settings, Volume2 } from "lucide-react"
-import type { MouseEvent } from "react"
 import { useEffect, useMemo } from "react"
 import ReactCountryFlag from "react-country-flag"
 
 import { sendToBackground } from "@plasmohq/messaging"
+import { useStorage } from "@plasmohq/storage/hook"
 
-import { AllCountryLanguages } from "~../../packages/common"
+import DictionarySelector from "~features/translate/components/DictionarySelector"
 import trpc from "~libs/trpc"
 import { TRANSLATE_CARD_WIDTH } from "~utils/constants"
 
 import { useContextPopover } from "../context/popover"
-import DictionarySelector from "./DictionarySelector"
 
 const TranslatePopup = () => {
   const toast = useToast()
+  const [theme] = useStorage("theme")
+
+  console.log(theme)
 
   const { cordinate, selectedText, setPopup, targetLanguage } = useContextPopover()
-  const { mutate: handleTranslate, isLoading, data, reset } = trpc.translation.translate.useMutation({})
+  const { mutate: handleTranslate, isLoading, data } = trpc.translation.translate.useMutation({})
 
   const getSourceLanguageFlag = useMemo(
     () => AllCountryLanguages.find((lang) => lang.code === (data?.sourceLanguage || "").toUpperCase()),
@@ -53,10 +56,6 @@ const TranslatePopup = () => {
     opeendSettings && setPopup(false)
   }
 
-  const handleAddLibrary = (event: MouseEvent<HTMLElement>) => {
-    event.preventDefault()
-  }
-
   const textToSpeech = () => {
     const speech = new SpeechSynthesisUtterance(data.translatedText as string)
     // Initialize the speech synthesis
@@ -68,11 +67,6 @@ const TranslatePopup = () => {
     window.speechSynthesis.speak(speech)
   }
 
-  const closeTranslationPopup = () => {
-    setPopup(false)
-    reset()
-  }
-
   const copyTranslatedText = () => {
     void navigator.clipboard.writeText(data.translatedText as string)
     toast.toast({
@@ -83,8 +77,10 @@ const TranslatePopup = () => {
 
   return (
     <motion.div
+      tabIndex={50}
+      data-theme="dark"
       id="el-translate-container"
-      className="absolute"
+      className="absolute z-50"
       initial={{
         top: cordinate.y - 5,
         left: cordinate.x - 5,
@@ -103,7 +99,7 @@ const TranslatePopup = () => {
               size: "sm",
               className: "flex gap-x-2 items-center rounded-lg !h-8"
             })}>
-            {isLoading ? (
+            {isLoading || !getSourceLanguageFlag ? (
               <Skeleton className="w-4 h-4" />
             ) : (
               <ReactCountryFlag
@@ -139,19 +135,22 @@ const TranslatePopup = () => {
           )}
         </CardContent>
         <Separator />
-        <CardFooter className="!p-3 flex items-center justify-between">
+        <CardFooter className="!p-3 flex items-center justify-between relative">
           <div className="flex flex-row gap-x-2 items-center justify-end">
             <Button disabled={isLoading} onClick={textToSpeech} className="h-9 w-9" variant="outline" size="icon">
               <Volume2 size={18} />
             </Button>
             <Button disabled={isLoading} onClick={copyTranslatedText} className="h-9 w-9" variant="outline" size="icon">
               <Copy size={18} />
             </Button>
-            <Button disabled={isLoading} onClick={openSettingsPage} className="h-9 w-9" variant="outline" size="icon">
+            <Button onClick={openSettingsPage} className="h-9 w-9" variant="outline" size="icon">
               <Settings size={18} />
             </Button>
           </div>
-          <DictionarySelector />
+          <Button variant="outline" size="sm" className="rounded">
+            Save to library
+          </Button>
+          <DictionarySelector translatedText={data?.translatedText as string} sourceLangauge={data?.sourceLanguage as string} />
         </CardFooter>
       </Card>
     </motion.div>