feat: schedule list item action menu (#230)

* feat: action menu for schedule list item

* feat: schedule action menu functionality

* feat: dialog provider popups for delete

* feat: duplicate schedule satiesfies type

* refactor: change non-null assertion to early return for rename schedule

* refactor: move schedule list item dialog providers to util file

* style: run prettier

* chore: inline object with satisfies operator

* fix: border issues

* style: change popups to match figma

* fix: update import for schedule list item dialog providers

* style: change dropdown text style to match figma

* fix: add back dialog context

* style: rounded edges when hovering over action + soften border color

* chore: cleanup and improve styling

* fix: dialog in popupmain

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
Co-authored-by: Razboy20 <razboy20@gmail.com>

src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss

@@ -11,7 +11,7 @@
 }
 
 .extensionRoot {
-    @apply font-sans h-full;
+    @apply font-sans;
     color: #303030;
 
     [data-rfd-drag-handle-context-id=':r1:'] {

src/views/components/common/ExtensionRoot/ExtensionRoot.tsx

@@ -2,24 +2,27 @@
 import 'uno.css';
 
 import clsx from 'clsx';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import styles from './ExtensionRoot.module.scss';
 
-interface Props {
-    testId?: string;
-    className?: string;
-}
+export const styleResetClass = styles.extensionRoot;
 
 /**
  * A wrapper component for the extension elements that adds some basic styling to them
  */
-export default function ExtensionRoot(props: React.PropsWithChildren<Props>): JSX.Element {
+export default function ExtensionRoot(props: React.HTMLProps<HTMLDivElement>): JSX.Element {
+    const { className, ...others } = props;
+
     return (
         <React.StrictMode>
-            <div className={clsx(styles.extensionRoot, props.className)} data-testid={props.testId}>
-                {props.children}
-            </div>
+            <div className={clsx(styleResetClass, 'h-full', className)} {...others} />
         </React.StrictMode>
     );
 }
+
+export const ExtensionRootWrapper = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>((props, ref) => (
+    <div className={styleResetClass}>
+        <div {...props} ref={ref} />
+    </div>
+));