Add ratings support (#21)

* Update rating types for multiserver support

* Add rating mutation

* Add rating support to table views

* Add rating support on playerbar

* Add hovercard component

* Handle rating from context menu

- Improve context menu components
- Allow left / right icons
- Allow nested menus

* Add selected item count

* Fix context menu auto direction

* Add transition and move portal for context menu

* Re-use context menu for all item dropdowns

* Add ratings to detail pages / double click to clear

* Bump react-query package

src/renderer/components/context-menu/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode, Ref } from 'react';
-import { Portal, UnstyledButton } from '@mantine/core';
-import { motion } from 'framer-motion';
+import { Grid, Group, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
+import { motion, Variants } from 'framer-motion';
 import styled from 'styled-components';
 
 interface ContextMenuProps {
@@ -22,8 +22,8 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
   box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
 `;
 
-export const ContextMenuButton = styled(UnstyledButton)`
-  padding: 1rem 1.5rem;
+export const StyledContextMenuButton = styled(UnstyledButton)`
+  padding: var(--dropdown-menu-item-padding);
   color: var(--dropdown-menu-fg);
   font-weight: 500;
   font-family: var(--content-font-family);
@@ -46,20 +46,84 @@ export const ContextMenuButton = styled(UnstyledButton)`
   }
 `;
 
-export const ContextMenu = forwardRef(
-  ({ yPos, xPos, minWidth, maxWidth, children }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
+export const ContextMenuButton = forwardRef(
+  (
+    {
+      children,
+      rightIcon,
+      leftIcon,
+      ...props
+    }: UnstyledButtonProps &
+      React.ComponentPropsWithoutRef<'button'> & {
+        leftIcon?: ReactNode;
+        rightIcon?: ReactNode;
+      },
+    ref: any,
+  ) => {
     return (
-      <Portal>
-        <ContextMenuContainer
-          ref={ref}
-          maxWidth={maxWidth}
-          minWidth={minWidth}
-          xPos={xPos}
-          yPos={yPos}
-        >
-          {children}
-        </ContextMenuContainer>
-      </Portal>
+      <StyledContextMenuButton
+        {...props}
+        key={props.key}
+        ref={ref}
+        as="button"
+        disabled={props.disabled}
+        onClick={props.onClick}
+      >
+        <Grid>
+          <Grid.Col
+            span={2}
+            sx={{ alignSelf: 'center' }}
+          >
+            {leftIcon}
+          </Grid.Col>
+          <Grid.Col span={8}>{children} </Grid.Col>
+          <Grid.Col
+            span={2}
+            sx={{ alignSelf: 'center' }}
+          >
+            <Group
+              align="flex-end"
+              position="right"
+            >
+              {rightIcon}
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </StyledContextMenuButton>
+    );
+  },
+);
+
+const variants: Variants = {
+  closed: {
+    opacity: 0,
+    transition: {
+      duration: 0.1,
+    },
+  },
+  open: {
+    opacity: 1,
+    transition: {
+      duration: 0.1,
+    },
+  },
+};
+
+export const ContextMenu = forwardRef(
+  ({ yPos, xPos, minWidth, maxWidth, children }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
+    return (
+      <ContextMenuContainer
+        ref={ref}
+        animate="open"
+        initial="closed"
+        maxWidth={maxWidth}
+        minWidth={minWidth}
+        variants={variants}
+        xPos={xPos}
+        yPos={yPos}
+      >
+        {children}
+      </ContextMenuContainer>
     );
   },
 );