feat: implement context menu for logic pills

In replacing the removing logic through right-click with a context menu, I forgot to support logic pills. This rendered it impossible to remove logic pills. This PR adds a similar context menu for logic pills such that they can be removed too :).

libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/QueryLogicPill.tsx

@@ -6,8 +6,9 @@ import { GeneralDescription, InputNode, InputNodeTypeTypes } from '../../../mode
 import { styleHandleMap } from '../../utils';
 import { setQuerybuilderGraphology, toQuerybuilderGraphology } from '@graphpolaris/shared/lib/data-access/store/querybuilderSlice';
 import { LogicInput } from './LogicInput';
-import { Button, DropdownTrigger, Input, LogicPill } from '@graphpolaris/shared/lib/components';
+import { Button, Input, LogicPill } from '@graphpolaris/shared/lib/components';
 import { QueryBuilderDispatcherContext } from '../../../panel/QueryBuilderDispatcher';
+import { DropdownTrigger, DropdownContainer, DropdownItemContainer, DropdownItem } from '@graphpolaris/shared/lib/components/dropdowns';
 
 export function QueryLogicPill(node: SchemaReactflowLogicNode) {
   const dispatch = useAppDispatch();
@@ -28,6 +29,7 @@ export function QueryLogicPill(node: SchemaReactflowLogicNode) {
     [node.id],
   );
   const [localInputCache, setLocalInputCache] = useState<Record<string, InputNodeTypeTypes>>({ ...graphologyNodeAttributes?.inputs });
+  const [openDropdown, setOpenDropdown] = useState(false);
 
   if (!data.id) throw new Error('LogicPill: data.id is undefined');
   const defaultHandleData = {
@@ -49,6 +51,11 @@ export function QueryLogicPill(node: SchemaReactflowLogicNode) {
     }
   };
 
+  function removeNode() {
+    graphologyGraph.dropNode(node.id);
+    dispatch(setQuerybuilderGraphology(graphologyGraph));
+  }
+
   useEffect(() => {
     if (inputReference?.current) inputReference.current.focus();
   }, [node.id]);
@@ -61,7 +68,27 @@ export function QueryLogicPill(node: SchemaReactflowLogicNode) {
 
   return (
     <LogicPill
-      title={connectionsToLeft[0]?.attributes?.sourceHandleData.attributeName}
+      title={
+        <div className="flex flex-row justify-between items-center">
+          <span>{connectionsToLeft[0]?.attributes?.sourceHandleData.attributeName}</span>
+
+          <DropdownContainer>
+            <DropdownTrigger size="md">
+              <Button
+                variantType="secondary"
+                variant="ghost"
+                size="2xs"
+                iconComponent={openDropdown ? 'icon-[ic--baseline-arrow-drop-up]' : 'icon-[ic--baseline-arrow-drop-down]'}
+                className={openDropdown ? 'border-secondary-200' : ''}
+              />
+            </DropdownTrigger>
+
+            <DropdownItemContainer>
+              <DropdownItem value="Remove" className="text-danger" onClick={(e) => removeNode()} />
+            </DropdownItemContainer>
+          </DropdownContainer>
+        </div>
+      }
       handleLeft={
         <Handle
           className={'!rounded-none !bg-transparent !w-full !h-full !border-0 !right-0 !left-0'}