feat(suggestions): update colors on click button apply

src/components/color-inputs/suggestions-button.tsx

@@ -1,27 +1,17 @@
 "use client";
 
-import { useSetAtom } from "jotai";
 import * as Dialog from "@radix-ui/react-dialog";
 import { css } from "@root/styled-system/css";
 
 import { Button } from "@/components/primitives/button";
 import { Suggestions } from "@/components/suggestions";
 import { LightFill, CloseFill } from "@/components/icons";
-import { background, foreground } from "@/store";
 import { useToggle } from "@/hooks/use-toggle";
 
 import classes from "./suggestions-button.styled";
 
 export function SuggestionsButton() {
   const { isEnabled: open, onOpen, onClose, setOpen } = useToggle();
-  const setFg = useSetAtom(foreground);
-  const setBg = useSetAtom(background);
-
-  function onClickApply(bg: string, fg: string) {
-    setFg(fg);
-    setBg(bg);
-    onClose();
-  }
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
@@ -51,7 +41,7 @@ export function SuggestionsButton() {
             </Dialog.Close>
           </header>
           <div className={classes.dialogBody}>
-            <Suggestions className={classes.suggestions} onApply={onClickApply} />
+            <Suggestions className={classes.suggestions} onApply={onClose} />
           </div>
         </Dialog.Content>
       </Dialog.Portal>

src/components/suggestions/suggestions.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef } from "react";
-import { useAtomValue } from "jotai";
+import { useAtomValue, useAtom } from "jotai";
 
 import { background, foreground, pickingColor, contrastRelation } from "@/store";
 import { createContrastSuggestions } from "@/lib/contrast-suggestions";
@@ -15,8 +15,8 @@ interface SuggestionProps extends Pick<SuggestionItemProps, "onApply"> {
 type Suggestions = ReturnType<typeof createContrastSuggestions>;
 
 export function Suggestions({ onApply, className }: SuggestionProps) {
-  const fg = useAtomValue(foreground);
-  const bg = useAtomValue(background);
+  const [fg, setFg] = useAtom(foreground);
+  const [bg, setBg] = useAtom(background);
   const isPickingColor = useAtomValue(pickingColor);
   const score = useAtomValue(contrastRelation);
   const prevSuggestions = useRef<Suggestions>([]);
@@ -29,14 +29,20 @@ export function Suggestions({ onApply, className }: SuggestionProps) {
 
   if (!isPickingColor) prevSuggestions.current = suggestions;
 
+  function handleOnApply(bg: string, fg: string) {
+    setFg(fg);
+    setBg(bg);
+    onApply?.(bg, fg);
+  }
+
   return (
     <div className={`${classes.root} ${className ?? ""}`}>
       {isEmpty ? (
         <p>There is nothing more to suggest</p>
       ) : (
         <>
           {suggestions.map((item) => (
-            <SuggestionItem key={item.id} {...item} onApply={onApply} />
+            <SuggestionItem key={item.id} {...item} onApply={handleOnApply} />
           ))}
         </>
       )}