fix sticker on user UI

src/app_modules/_global/lib/stiker/comp_button_sticker.tsx

@@ -1,40 +1,80 @@
+import { APIs } from "@/lib";
 import {
   ActionIcon,
   Box,
+  Button,
+  CloseButton,
   Image,
+  Loader,
   ScrollArea,
   SimpleGrid,
   Tooltip,
-  Loader,
-  Group,
 } from "@mantine/core";
 import { IconMoodSmileFilled } from "@tabler/icons-react";
+import { useRef, useState } from "react";
 import { MainColor } from "../../color";
 import { UIGlobal_Modal } from "../../ui";
 import { insertStickerReactQuill } from "./react_quill_format_for_stiker";
-import { APIs } from "@/lib";
+import { ISticker } from "../interface/stiker";
 
 interface Props {
   open: () => void;
   close: () => void;
   opened: boolean;
   quillRef: any;
-  dataSticker: any;
-  listEmotions: any
+  dataSticker: ISticker[] | null;
+  // listEmotions: any[];
+  // onEmotionSelect?: (val: string | null) => void;
 }
+
 export const Comp_ButtonSticker = ({
   open,
   close,
   opened,
   quillRef,
   dataSticker,
-  listEmotions,
+  // listEmotions,
+  // onEmotionSelect,
 }: Props) => {
-  
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Menyimpan id emosi yang dipilih
+  const [selectedEmotions, setSelectedEmotions] = useState<string[]>([]);
+
+  // Menyimpan urutan awal
+  // const [originalOrder] = useState(listEmotions);
+
+  // const handleEmotionClick = (value: string) => {
+  //   setSelectedEmotions(
+  //     (prev) =>
+  //       prev.includes(value)
+  //         ? prev.filter((v) => v !== value) // batal pilih
+  //         : [...prev, value] // tambah pilih
+  //   );
+  // };
+
+  // Urutkan emosi: yang dipilih muncul di depan
+  // const orderedEmotions = [
+  //   ...selectedEmotions.map((val) => listEmotions.find((e: any) => e.value === val)),
+  //   ...originalOrder.filter((e: any) => !selectedEmotions.includes(e.value)),
+  // ];
+
   return (
     <>
-      <ActionIcon onClick={open} variant="transparent" disabled={dataSticker.length === 0}>
-        <IconMoodSmileFilled color={dataSticker.length === 0 ? "gray" : MainColor.white} size={30} />
+      <ActionIcon
+        onClick={open}
+        variant="transparent"
+        disabled={!dataSticker}
+      >
+        <IconMoodSmileFilled
+          color={
+            !dataSticker
+              ? "gray"
+              : MainColor.yellow
+          }
+          size={30}
+        />
       </ActionIcon>
 
       <UIGlobal_Modal
@@ -43,19 +83,59 @@ export const Comp_ButtonSticker = ({
         title="Pilih Stiker"
         closeButton
         closeOnClickOutside={false}
-
       >
         <Box mah={`${500}dvh`}>
-          {/* <Group position="center">
-            {listEmotions.map((item: any) => (
-              <ActionIcon key={item.id} onClick={() => open()}>
-                <IconMoodSmileFilled color={item.value} size={30} />
-              </ActionIcon>
-            ))}
-          </Group> */}
-          <ScrollArea h={380}>
+          {/* <ScrollArea type="never" viewportRef={scrollRef}>
+            <Box
+              p="sm"
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                gap: "0.5rem",
+                overflowX: "auto",
+                overflowY: "hidden",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {orderedEmotions.map((item: any) => {
+                const isSelected = selectedEmotions.includes(item.value);
+
+                return (
+                  <Button
+                    key={item.id}
+                    variant={isSelected ? "filled" : "light"}
+                    color={isSelected ? "blue" : "gray"}
+                    radius="xl"
+                    style={{ flexShrink: 0, position: "relative" }}
+                    onClick={() => handleEmotionClick(item.value)}
+                  >
+                    {item.label}
+                    {isSelected && (
+                      <CloseButton
+                        onClick={(e) => {
+                          e.stopPropagation(); // agar tidak trigger lagi handleEmotionClick
+                          handleEmotionClick(item.value);
+                        }}
+                        style={{
+                          position: "absolute",
+                          top: -6,
+                          right: -6,
+                          backgroundColor: "white",
+                          borderRadius: "50%",
+                          boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+                        }}
+                        size="sm"
+                      />
+                    )}
+                  </Button>
+                );
+              })}
+            </Box>
+          </ScrollArea> */}
+
+          <ScrollArea h={480}>
             <SimpleGrid cols={3} spacing="md">
-              {dataSticker.map((item: any) => (
+              {dataSticker?.map((item: any) => (
                 <Box key={item.id}>
                   <Tooltip label={item.name}>
                     <Image