add emoji removal

apps/client/src/components/emoji-picker.tsx

@@ -1,27 +1,34 @@
 import React, { ReactNode } from 'react';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { ActionIcon, Popover } from '@mantine/core';
+import { ActionIcon, Popover, Button, useMantineColorScheme } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 
 export interface EmojiPickerInterface {
   onEmojiSelect: (emoji: any) => void;
   icon: ReactNode;
+  removeEmojiAction: () => void;
 }
 
-function EmojiPicker({ onEmojiSelect, icon }: EmojiPickerInterface) {
+function EmojiPicker({ onEmojiSelect, icon, removeEmojiAction }: EmojiPickerInterface) {
   const [opened, handlers] = useDisclosure(false);
+  const { colorScheme } = useMantineColorScheme();
 
   const handleEmojiSelect = (emoji) => {
     onEmojiSelect(emoji);
     handlers.close();
   };
 
+  const handleRemoveEmoji = () => {
+    removeEmojiAction();
+    handlers.close();
+  };
+
   return (
     <Popover
       opened={opened}
       onClose={handlers.close}
-      width={200}
+      width={332}
       position="bottom"
     >
       <Popover.Target>
@@ -30,7 +37,18 @@ function EmojiPicker({ onEmojiSelect, icon }: EmojiPickerInterface) {
         </ActionIcon>
       </Popover.Target>
       <Popover.Dropdown bg="000" style={{ border: "none" }}>
-        <Picker data={data} onEmojiSelect={handleEmojiSelect} />
+        <Picker data={data} onEmojiSelect={handleEmojiSelect}
+                perLine={8}
+                skinTonePosition='search'
+                theme={colorScheme}
+        />
+        <Button variant="default" color="gray"
+                size="xs"
+                style={{ position: 'absolute', zIndex: 2, bottom: '1rem', right: '1rem'}}
+                onClick={handleRemoveEmoji}>
+          Remove
+        </Button>
+
       </Popover.Dropdown>
     </Popover>
   );

apps/client/src/features/page/tree/page-tree.tsx

@@ -113,6 +113,11 @@ function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
     updatePageMutation.mutateAsync({ id: node.id, icon: emoji.native });
   };
 
+  const handleRemoveEmoji = () => {
+    handleUpdateNodeIcon(node.id, null);
+    updatePageMutation.mutateAsync({ id: node.id, icon: null });
+  };
+
   if (node.willReceiveDrop && node.isClosed) {
     setTimeout(() => {
       if (node.state.willReceiveDrop) node.open();
@@ -134,7 +139,7 @@ function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
             node.data.icon ? node.data.icon :
               <IconFileDescription size="18px"  />
 
-          }/>
+          } removeEmojiAction={handleRemoveEmoji}/>
         </div>
 
         <span className={classes.text}>