New dropdown implementation

2026-08-07 09:23:00 +02:00 · 2024-02-15 13:00:45 +01:00
parent bdce486a24
commit 0a8723c544
18 changed files with 425 additions and 472 deletions
@@ -19,7 +19,6 @@
        "@heroicons/react": "^2.1.1",
        "@iarna/toml": "2.2.3",
        "@octokit/rest": "^18.12.0",
-        "@popperjs/core": "^2.11.6",
        "@sentry/react": "^6.19.7",
        "@sentry/tracing": "^6.19.7",
        "@tailwindcss/forms": "^0.5.3",
@@ -83,7 +82,6 @@
        "react-dom": "17.0.1",
        "react-dropzone": "^11.7.1",
        "react-markdown": "^8.0.7",
-        "react-popper": "^2.3.0",
        "react-quill": "^2.0.0",
        "react-router-dom": "^6.8.0",
        "react-sortable-hoc": "^2.0.0",
@@ -2686,7 +2686,6 @@
    "@heroicons/react": "^2.1.1",
    "@iarna/toml": "2.2.3",
    "@octokit/rest": "^18.12.0",
-    "@popperjs/core": "^2.11.6",
    "@sentry/react": "^6.19.7",
    "@sentry/tracing": "^6.19.7",
    "@tailwindcss/forms": "^0.5.3",
@@ -2750,7 +2749,6 @@
    "react-dom": "17.0.1",
    "react-dropzone": "^11.7.1",
    "react-markdown": "^8.0.7",
-    "react-popper": "^2.3.0",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.8.0",
    "react-sortable-hoc": "^2.0.0",
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--frontmatter-border)] bg-[var(--vscode-sideBar-background)] p-1 text-[var(--vscode-editor-foreground)] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] rounded-md border border-[var(--frontmatter-border)] bg-[var(--vscode-sideBar-background)] p-1 text-[var(--vscode-editor-foreground)] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-96 overflow-auto",
        className
      )}
      {...props}
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
-      "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[var(--vscode-list-hoverBackground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer",
+      "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[var(--vscode-list-hoverBackground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer disabled:opacity-50",
      inset && "pl-8",
      className
    )}
@@ -1,9 +1,9 @@
-import { Menu } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import { MenuItem, MenuItems } from '../Menu';
+import { MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';

 export interface IChoiceButtonProps {
  title: string;
@@ -36,40 +36,39 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
        {title}
      </button>

-      {choices.length > 0 && (
-        <Menu as="span" className="-ml-px relative block">
-          <Menu.Button
-            className={`h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
-            disabled={disabled}
-          >
-            <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
-            <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
-          </Menu.Button>

-          <MenuItems widthClass={`w-56`} disablePopper>
-            <div className="py-1">
-              {choices.map((choice, idx) => (
-                <MenuItem
-                  key={idx}
-                  title={
-                    choice.icon ? (
-                      <div className="flex items-center">
-                        {choice.icon}
-                        <span>{choice.title}</span>
-                      </div>
-                    ) : (
-                      choice.title
-                    )
-                  }
-                  value={null}
-                  onClick={choice.onClick}
-                  disabled={choice.disabled}
-                />
-              ))}
-            </div>
-          </MenuItems>
-        </Menu>
-      )}
-    </span>
+      {choices.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            className='h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50'
+            disabled={disabled}>
+            <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
+            <ChevronDownIcon className={`h-4 w-4`} aria-hidden="true" />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align='end'>
+            {choices.map((choice, idx) => (
+              <MenuItem
+                key={idx}
+                title={
+                  choice.icon ? (
+                    <div className="flex items-center">
+                      {choice.icon}
+                      <span>{choice.title}</span>
+                    </div>
+                  ) : (
+                    choice.title
+                  )
+                }
+                value={null}
+                onClick={choice.onClick}
+                disabled={choice.disabled}
+              />
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+      }
+    </span >
  );
 };
@@ -1,13 +1,11 @@
 import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
-import { EyeIcon, GlobeEuropeAfricaIcon, CommandLineIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, GlobeEuropeAfricaIcon, CommandLineIcon, TrashIcon, EllipsisVerticalIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { CustomScript, ScriptType } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
-import { MenuItem, MenuItems, ActionMenuButton, QuickAction } from '../Menu';
+import { QuickAction } from '../Menu';
 import { Alert } from '../Modals/Alert';
-import { usePopper } from 'react-popper';
-import { useState } from 'react';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -15,6 +13,7 @@ import { SettingsSelector } from '../../state';
 import { GeneralCommands } from '../../../constants';
 import { PinIcon } from '../Icons/PinIcon';
 import { PinnedItemsAtom } from '../../state/atom/PinnedItems';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';

 export interface IContentActionsProps {
  title: string;
@@ -37,19 +36,12 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
  const [showDeletionAlert, setShowDeletionAlert] = React.useState(false);
  const settings = useRecoilValue(SettingsSelector);

-  const [referenceElement, setReferenceElement] = useState<any>(null);
-  const [popperElement, setPopperElement] = useState<any>(null);
-  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
-    placement: listView ? 'right-start' : 'bottom-end',
-    strategy: 'fixed'
-  });
-
-  const onView = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onView = (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    onOpen();
  };

-  const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onDelete = (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    setShowDeletionAlert(true);
  };
@@ -61,7 +53,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
    setShowDeletionAlert(false);
  };

-  const openOnWebsite = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  const openOnWebsite = React.useCallback((e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    if (settings?.websiteUrl && path) {
      Messenger.send(GeneralCommands.toVSCode.openOnWebsite, {
@@ -71,14 +63,14 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
    }
  }, [settings?.websiteUrl, path]);

-  const pinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  const pinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    messageHandler.request<string[]>(DashboardMessage.pinItem, path).then((result) => {
      setPinnedItems(result || []);
    })
  }, [path]);

-  const unpinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  const unpinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
    e.stopPropagation();
    messageHandler.request<string[]>(DashboardMessage.unpinItem, path).then((result) => {
      setPinnedItems(result || []);
@@ -86,7 +78,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
  }, [path]);

  const runCustomScript = React.useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>, script: CustomScript) => {
+    (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>, script: CustomScript) => {
      e.stopPropagation();
      Messenger.send(DashboardMessage.runCustomScript, { script, path });
    },
@@ -106,16 +98,10 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
          !script.hidden
      )
      .map((script) => (
-        <MenuItem
-          key={script.title}
-          title={
-            <div className="flex items-center">
-              <CommandLineIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-              <span>{script.title}</span>
-            </div>
-          }
-          onClick={(value, e) => runCustomScript(e, script)}
-        />
+        <DropdownMenuItem onClick={(e) => runCustomScript(e, script)}>
+          <CommandLineIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+          <span>{script.title}</span>
+        </DropdownMenuItem>
      ));
  }, [scripts]);

@@ -150,67 +136,41 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
              </div>
            )}

-            <div ref={setReferenceElement} className={`flex`}>
-              <ActionMenuButton title={l10n.t(LocalizationKey.dashboardContentsContentActionsActionMenuButtonTitle)} />
-            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger className='text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'>
+                <span className="sr-only">{l10n.t(LocalizationKey.dashboardContentsContentActionsActionMenuButtonTitle)}</span>
+                <EllipsisVerticalIcon className="w-4 h-4" aria-hidden="true" />
+              </DropdownMenuTrigger>

-            <div
-              className="menu_items__wrapper z-20"
-              ref={setPopperElement}
-              style={styles.popper}
-              {...attributes.popper}
-            >
-              <MenuItems
-                updatePopper={forceUpdate || undefined}
-                widthClass="w-44"
-                marginTopClass={listView ? '' : ''}
-              >
-                <MenuItem
-                  title={
-                    <div className="flex items-center">
-                      <PinIcon className={`mr-2 h-5 w-5 flex-shrink-0 ${isPinned ? "" : "-rotate-90"}`} aria-hidden={true} />{' '}
-                      <span>{isPinned ? l10n.t(LocalizationKey.commonUnpin) : l10n.t(LocalizationKey.commonPin)}</span>
-                    </div>
-                  }
-                  onClick={(_, e) => isPinned ? unpinItem(e) : pinItem(e)}
-                />
-                <MenuItem
-                  title={
-                    <div className="flex items-center">
-                      <EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}</span>
-                    </div>
-                  }
-                  onClick={(_, e) => onView(e)}
-                />
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={(e) => isPinned ? unpinItem(e) : pinItem(e)}>
+                  <PinIcon className={`mr-2 h-4 w-4 ${isPinned ? "" : "-rotate-90"}`} aria-hidden={true} />
+                  <span>{isPinned ? l10n.t(LocalizationKey.commonUnpin) : l10n.t(LocalizationKey.commonPin)}</span>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem onClick={onView}>
+                  <EyeIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                  <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}</span>
+                </DropdownMenuItem>

                {
                  settings?.websiteUrl && (
-                    <MenuItem
-                      title={
-                        <div className="flex items-center">
-                          <GlobeEuropeAfricaIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>{l10n.t(LocalizationKey.commonOpenOnWebsite)}</span>
-                        </div>
-                      }
-                      onClick={(_, e) => openOnWebsite(e)}
-                    />
+                    <DropdownMenuItem onClick={openOnWebsite}>
+                      <GlobeEuropeAfricaIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                      <span>{l10n.t(LocalizationKey.commonOpenOnWebsite)}</span>
+                    </DropdownMenuItem>
                  )
                }

                {customScriptActions}

-                <MenuItem
-                  title={
-                    <div className="flex items-center">
-                      <TrashIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>{l10n.t(LocalizationKey.commonDelete)}</span>
-                    </div>
-                  }
-                  onClick={(_, e) => onDelete(e)}
-                />
-              </MenuItems>
-            </div>
+                <DropdownMenuItem onClick={onDelete} className={`focus:bg-[var(--vscode-statusBarItem-errorBackground)] focus:text-[var(--vscode-statusBarItem-errorForeground)]`}>
+                  <TrashIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                  <span>{l10n.t(LocalizationKey.commonDelete)}</span>
+                </DropdownMenuItem>
+
+              </DropdownMenuContent>
+            </DropdownMenu>
          </Menu>
        </div>
      </div>
@@ -1,9 +1,9 @@
-import { Menu } from '@headlessui/react';
-import { FunnelIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
+import { FunnelIcon } from '@heroicons/react/24/solid';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';

 export interface IFilterProps {
  label: string;
@@ -25,37 +25,35 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({
  }

  return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton
-          label={
-            <>
-              <FunnelIcon className={`inline-block w-5 h-5 mr-1`} />
-              <span>{label}</span>
-            </>
-          }
-          title={activeItem || DEFAULT_VALUE}
+    <DropdownMenu>
+      <MenuButton
+        label={
+          <>
+            <FunnelIcon className={`inline-block w-4 h-4 mr-2`} />
+            <span>{label}</span>
+          </>
+        }
+        title={activeItem || DEFAULT_VALUE}
+      />
+
+      <DropdownMenuContent>
+        <MenuItem
+          title={DEFAULT_VALUE}
+          value={null}
+          isCurrent={!!activeItem}
+          onClick={() => onClick(null)}
        />

-        <MenuItems disablePopper>
+        {items.map((option) => (
          <MenuItem
-            title={DEFAULT_VALUE}
-            value={null}
-            isCurrent={!!activeItem}
-            onClick={() => onClick(null)}
+            key={option}
+            title={option}
+            value={option}
+            isCurrent={option === activeItem}
+            onClick={() => onClick(option)}
          />
-
-          {items.map((option) => (
-            <MenuItem
-              key={option}
-              title={option}
-              value={option}
-              isCurrent={option === activeItem}
-              onClick={() => onClick(option)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
  );
 };
@@ -1,10 +1,10 @@
-import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { FolderAtom, SettingsSelector } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';

 export interface IFoldersFilterProps { }

@@ -21,29 +21,27 @@ export const FoldersFilter: React.FunctionComponent<
  }

  return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderFoldersMenuButtonShowing)} title={crntFolder || DEFAULT_TYPE} />
+    <DropdownMenu>
+      <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderFoldersMenuButtonShowing)} title={crntFolder || DEFAULT_TYPE} />

-        <MenuItems disablePopper>
+      <DropdownMenuContent>
+        <MenuItem
+          title={DEFAULT_TYPE}
+          value={null}
+          isCurrent={!crntFolder}
+          onClick={(value) => setCrntFolder(value)}
+        />
+
+        {contentFolders.map((option) => (
          <MenuItem
-            title={DEFAULT_TYPE}
-            value={null}
-            isCurrent={!crntFolder}
+            key={option.title}
+            title={option.title}
+            value={option.title}
+            isCurrent={option.title === crntFolder}
            onClick={(value) => setCrntFolder(value)}
          />
-
-          {contentFolders.map((option) => (
-            <MenuItem
-              key={option.title}
-              title={option.title}
-              value={option.title}
-              isCurrent={option.title === crntFolder}
-              onClick={(value) => setCrntFolder(value)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
  );
 };
@@ -1,11 +1,11 @@
-import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { GroupOption } from '../../constants/GroupOption';
 import { AllPagesAtom, GroupingAtom } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';

 export interface IGroupingProps { }

@@ -42,22 +42,20 @@ export const Grouping: React.FunctionComponent<
  }

  return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />
+    <DropdownMenu>
+      <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />

-        <MenuItems disablePopper>
-          {GROUP_OPTIONS.map((option) => (
-            <MenuItem
-              key={option.id}
-              title={option.name}
-              value={option.id}
-              isCurrent={option.id === crntGroup?.id}
-              onClick={(value) => setGroup(value)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+      <DropdownMenuContent>
+        {GROUP_OPTIONS.map((option) => (
+          <MenuItem
+            key={option.id}
+            title={option.name}
+            value={option.id}
+            isCurrent={option.id === crntGroup?.id}
+            onClick={(value) => setGroup(value)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
  );
 };
@@ -1,13 +1,13 @@
 import { messageHandler } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
 import { ArrowsRightLeftIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SettingsSelector } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';

 export interface IProjectSwitcherProps { }

@@ -32,8 +32,8 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
  }

  return (
-    <div className="flex items-center mr-4 z-[51]">
-      <Menu as="div" className="relative z-10 inline-block text-left">
+    <div className="mr-4 z-[51]">
+      <DropdownMenu>
        <MenuButton
          label={(
            <div className="inline-flex items-center">
@@ -43,7 +43,7 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
          )}
          title={crntProject} />

-        <MenuItems disablePopper>
+        <DropdownMenuContent>
          {projects.map((p) => (
            <MenuItem
              key={p.name}
@@ -53,8 +53,8 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
              onClick={(value) => setProject(p.name)}
            />
          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div >
  );
 };
@@ -1,5 +1,4 @@
 import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { ExtensionState } from '../../../constants';
@@ -9,10 +8,11 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { NavigationType } from '../../models';
 import { SortingOption } from '../../models/SortingOption';
 import { SearchSelector, SettingsSelector, SortingAtom } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import { Sorting as SortingHelpers } from '../../../helpers/Sorting';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';

 export interface ISortingProps {
  disableCustomSorting?: boolean;
@@ -177,26 +177,24 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
  }

  return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton
-          label={l10n.t(LocalizationKey.dashboardHeaderSortingLabel)}
-          title={crntSort?.title || crntSort?.name || ''}
-          disabled={!!searchValue}
-        />
+    <DropdownMenu>
+      <MenuButton
+        label={l10n.t(LocalizationKey.dashboardHeaderSortingLabel)}
+        title={crntSort?.title || crntSort?.name || ''}
+        disabled={!!searchValue}
+      />

-        <MenuItems widthClass="w-48" disablePopper>
-          {allOptions.map((option) => (
-            <MenuItem
-              key={option.id}
-              title={option.title || option.name}
-              value={option}
-              isCurrent={option.id === crntSort.id}
-              onClick={(value) => updateSorting(value)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+      <DropdownMenuContent>
+        {allOptions.map((option) => (
+          <MenuItem
+            key={option.id}
+            title={option.title || option.name}
+            value={option}
+            isCurrent={option.id === crntSort.id}
+            onClick={(value) => updateSorting(value)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
  );
 };
@@ -1,27 +1,18 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
 import {
-  ClipboardIcon,
  CodeBracketIcon,
  DocumentIcon,
-  EyeIcon,
  MusicalNoteIcon,
-  PencilIcon,
  PhotoIcon,
  PlusIcon,
-  CommandLineIcon,
-  TrashIcon,
  VideoCameraIcon,
-  EllipsisVerticalIcon
 } from '@heroicons/react/24/outline';
 import { basename, dirname } from 'path';
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { CustomScript } from '../../../helpers/CustomScript';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import { SnippetParser } from '../../../helpers/SnippetParser';
-import { ScriptType, Snippet } from '../../../models';
 import { MediaInfo } from '../../../models/MediaPaths';
 import { DashboardMessage } from '../../DashboardMessage';
 import {
@@ -30,14 +21,15 @@ import {
  SettingsSelector,
  ViewDataSelector
 } from '../../state';
-import { QuickAction } from '../Menu/QuickAction';
 import { Alert } from '../Modals/Alert';
 import { InfoDialog } from '../Modals/InfoDialog';
 import { DetailsSlideOver } from './DetailsSlideOver';
 import { MediaSnippetForm } from './MediaSnippetForm';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
+import { ItemMenu } from './ItemMenu';
+import { getRelPath } from '../../utils';
+import { Snippet } from '../../../models';

 export interface IItemProps {
  media: MediaInfo;
@@ -59,6 +51,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
  const viewData = useRecoilValue(ViewDataSelector);

+  const relPath = useMemo(() => {
+    return getRelPath(media.fsPath, settings?.staticFolder, settings?.wsFolder);
+  }, [media.fsPath, settings?.staticFolder, settings?.wsFolder]);
+
  const hasViewData = useMemo(() => {
    return viewData?.data?.filePath !== undefined;
  }, [viewData]);
@@ -91,44 +87,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({
    return '';
  };

-  const getRelPath = () => {
-    let relPath: string | undefined = '';
-    if (settings?.wsFolder && media.fsPath) {
-      const wsFolderParsed = parseWinPath(settings.wsFolder);
-      const mediaParsed = parseWinPath(media.fsPath);
-
-      relPath = mediaParsed.split(wsFolderParsed).pop();
-
-      // If the static folder is the root, we can just return the relative path
-      if (settings.staticFolder === "/") {
-        return relPath;
-      } else if (settings.staticFolder && relPath) {
-        const staticFolderParsed = parseWinPath(settings.staticFolder);
-        relPath = relPath.split(staticFolderParsed).pop();
-      }
-    }
-    return relPath;
-  };
-
  const getFileName = () => {
    return basename(parseWinPath(media.fsPath) || '');
  };

-  const copyToClipboard = () => {
-    const relPath = getRelPath();
-    Messenger.send(DashboardMessage.copyToClipboard, parseWinPath(relPath) || '');
-  };
-
-  const runCustomScript = (script: CustomScript) => {
-    Messenger.send(DashboardMessage.runCustomScript, {
-      script,
-      path: media.fsPath
-    });
-  };
-
-  const insertToArticle = () => {
-    const relPath = getRelPath();
-
+  const insertIntoArticle = useCallback(() => {
    if (viewData?.data?.type === 'file') {
      Messenger.send(DashboardMessage.insertFile, {
        relPath: parseWinPath(relPath) || '',
@@ -158,7 +121,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
        title: media.metadata.title || ''
      });
    }
-  };
+  }, [media, settings, viewData, relPath]);

  const insertSnippet = useCallback(() => {
    if (mediaSnippets.length === 1) {
@@ -176,8 +139,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
    (snippet: Snippet) => {
      setShowSnippetSelection(false);

-      const relPath = getRelPath();
-
      const fieldData = {
        mediaUrl: (parseWinPath(relPath) || '').replace(/ /g, '%20'),
        filename: basename(relPath || ''),
@@ -203,7 +164,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
        setMediaData(fieldData);
      }
    },
-    [media, settings, viewData, mediaSnippets]
+    [media, settings, viewData, mediaSnippets, relPath]
  );

  /**
@@ -211,8 +172,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
   */
  const insertMediaSnippetToArticle = useCallback(
    (output: string) => {
-      const relPath = getRelPath();
-
      Messenger.send(DashboardMessage.insertMedia, {
        relPath: parseWinPath(relPath) || '',
        file: viewData?.data?.filePath,
@@ -221,20 +180,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
        snippet: output
      });
    },
-    [viewData]
+    [viewData, relPath]
  );

-  const deleteMedia = () => {
-    setShowAlert(true);
-  };
-
-  const revealMedia = () => {
-    Messenger.send(DashboardMessage.revealMedia, {
-      file: media.fsPath,
-      folder: selectedFolder
-    });
-  };
-
  const confirmDeletion = () => {
    Messenger.send(DashboardMessage.deleteMedia, {
      file: media.fsPath,
@@ -278,10 +226,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
    return sizeDetails.join(' - ');
  };

-  const viewMediaDetails = () => {
-    setShowDetails(true);
-  };
-
  const openLightbox = useCallback(() => {
    if (isImageFile) {
      setLightbox(media.vsPath || '');
@@ -293,20 +237,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
    setShowDetails(true);
  };

-  const customScriptActions = useMemo(() => {
-    return (settings?.scripts || [])
-      .filter((script) => script.type === ScriptType.MediaFile && !script.hidden)
-      .map((script) => (
-        <DropdownMenuItem
-          key={script.title}
-          onClick={() => runCustomScript(script)}
-        >
-          <CommandLineIcon className="mr-2 h-4 w-4" aria-hidden={true} />
-          <span>{script.title}</span>
-        </DropdownMenuItem>
-      ));
-  }, [settings?.scripts]);
-
  const isVideoFile = useMemo(() => {
    if (media.mimeType?.startsWith('video/')) {
      return true;
@@ -430,7 +360,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                <button
                  title="Insert image"
                  className={`h-1/3 text-white hover:text-[var(--vscode-button-background)]`}
-                  onClick={insertToArticle}
+                  onClick={insertIntoArticle}
                >
                  <PlusIcon className={`w-full h-full hover:drop-shadow-md `} aria-hidden="true" />
                </button>
@@ -453,114 +383,20 @@ export const Item: React.FunctionComponent<IItemProps> = ({
          )}
        </button>
        <div className={`relative py-4 pl-4 pr-12`}>
-          <div className={`group/actions absolute top-4 right-4 flex flex-col space-y-4`}>
-            <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 group-hover/actions:bg-[var(--vscode-sideBar-background)] group-hover/actions:border-[var(--frontmatter-border)]`}>
-              <Menu as="div" className="relative z-10 flex text-left">
-                <div className="hidden group-hover/actions:flex">
-                  <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemMenuItemView)} onClick={viewMediaDetails}>
-                    <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
-                    <span className='sr-only'>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemView)}</span>
-                  </QuickAction>
+          <ItemMenu
+            media={media}
+            relPath={relPath}
+            selectedFolder={selectedFolder}
+            viewData={viewData?.data}
+            snippets={mediaSnippets}
+            scripts={settings?.scripts}
+            insertIntoArticle={insertIntoArticle}
+            insertSnippet={insertSnippet}
+            showUpdateMedia={updateMetadata}
+            showMediaDetails={() => setShowDetails(true)}
+            processSnippet={processSnippet}
+            onDelete={() => setShowAlert(true)} />

-                  <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)} onClick={updateMetadata}>
-                    <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
-                    <span className='sr-only'>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}</span>
-                  </QuickAction>
-
-                  {viewData?.data?.filePath ? (
-                    <>
-                      <QuickAction
-                        title={
-                          viewData.data.metadataInsert && viewData.data.fieldName
-                            ? l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertField, viewData.data.fieldName)
-                            : l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertMarkdown)
-                        }
-                        onClick={insertToArticle}
-                      >
-                        <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
-                      </QuickAction>
-
-                      {viewData?.data?.position && mediaSnippets.length > 0 && (
-                        <QuickAction title={l10n.t(LocalizationKey.commonInsertSnippet)} onClick={insertSnippet}>
-                          <CodeBracketIcon className={`w-4 h-4`} aria-hidden="true" />
-                        </QuickAction>
-                      )}
-                    </>
-                  ) : (
-                    <>
-                      <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)} onClick={copyToClipboard}>
-                        <ClipboardIcon className={`w-4 h-4`} aria-hidden="true" />
-                      </QuickAction>
-                    </>
-                  )}
-
-                  <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionDelete)} onClick={deleteMedia}>
-                    <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
-                  </QuickAction>
-                </div>
-
-                <DropdownMenu>
-                  <DropdownMenuTrigger className='text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'>
-                    <span className="sr-only">{l10n.t(LocalizationKey.commonMenu)}</span>
-                    <EllipsisVerticalIcon className="w-4 h-4" aria-hidden="true" />
-                  </DropdownMenuTrigger>
-
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={updateMetadata}>
-                      <PencilIcon className="mr-2 h-4 w-4" aria-hidden={true} />
-                      <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}</span>
-                    </DropdownMenuItem>
-
-                    {
-                      viewData?.data?.filePath ? (
-                        <>
-                          <DropdownMenuItem onClick={updateMetadata}>
-                            <PlusIcon className="mr-2 h-4 w-4" aria-hidden={true} />
-                            <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemInsertImage)}</span>
-                          </DropdownMenuItem>
-
-                          {
-                            viewData?.data?.position &&
-                            mediaSnippets.length > 0 &&
-                            mediaSnippets.map((snippet, idx) => (
-                              <DropdownMenuItem key={idx} onClick={() => processSnippet(snippet)}>
-                                <CodeBracketIcon
-                                  className="mr-2 h-4 w-4"
-                                  aria-hidden={true}
-                                />
-                                <span>{snippet.title}</span>
-                              </DropdownMenuItem>
-                            ))
-                          }
-
-                          {customScriptActions}
-                        </>
-                      ) : (
-                        <>
-                          <DropdownMenuItem onClick={copyToClipboard}>
-                            <ClipboardIcon className="mr-2 h-4 w-4" aria-hidden={true} />
-                            <span>{l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)}</span>
-                          </DropdownMenuItem>
-
-                          {customScriptActions}
-                        </>
-                      )
-                    }
-
-                    <DropdownMenuItem onClick={revealMedia}>
-                      <EyeIcon className="mr-2 h-4 w-4" aria-hidden={true} />
-                      <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemRevealMedia)}</span>
-                    </DropdownMenuItem>
-
-                    <DropdownMenuItem onClick={deleteMedia} className={`focus:bg-[var(--vscode-statusBarItem-errorBackground)] focus:text-[var(--vscode-statusBarItem-errorForeground)]`}>
-                      <TrashIcon className="mr-2 h-4 w-4" aria-hidden={true} />
-                      <span>{l10n.t(LocalizationKey.commonDelete)}</span>
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </Menu>
-            </div>
-          </div>
          <p className={`text-sm font-bold pointer-events-none flex items-center break-all text-[var(--vscode-foreground)]}`}>
            {basename(parseWinPath(media.fsPath) || '')}
          </p>
@@ -0,0 +1,191 @@
+import * as React from 'react';
+import * as l10n from '@vscode/l10n';
+import { Menu } from '@headlessui/react';
+import { LocalizationKey } from '../../../localization';
+import { QuickAction } from '../Menu';
+import { ClipboardIcon, CodeBracketIcon, CommandLineIcon, EllipsisVerticalIcon, EyeIcon, PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { CustomScript, MediaInfo, ScriptType, Snippet, ViewData } from '../../../models';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
+import { messageHandler } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+import { parseWinPath } from '../../../helpers/parseWinPath';
+
+export interface IItemMenuProps {
+  media: MediaInfo;
+  relPath?: string;
+  selectedFolder: string | null;
+  viewData?: ViewData;
+  snippets: Snippet[];
+  scripts?: CustomScript[];
+  insertIntoArticle: () => void;
+  insertSnippet: () => void;
+  showUpdateMedia: () => void;
+  showMediaDetails: () => void;
+  processSnippet: (snippet: Snippet) => void;
+  onDelete: () => void;
+}
+
+export const ItemMenu: React.FunctionComponent<IItemMenuProps> = ({
+  media,
+  relPath,
+  selectedFolder,
+  viewData,
+  snippets,
+  scripts,
+  insertIntoArticle,
+  insertSnippet,
+  showUpdateMedia,
+  showMediaDetails,
+  processSnippet,
+  onDelete,
+}: React.PropsWithChildren<IItemMenuProps>) => {
+
+  const copyToClipboard = React.useCallback(() => {
+    if (relPath) {
+      messageHandler.send(DashboardMessage.copyToClipboard, parseWinPath(relPath) || '');
+    }
+  }, [relPath]);
+
+  const runCustomScript = React.useCallback((script: CustomScript) => {
+    messageHandler.send(DashboardMessage.runCustomScript, {
+      script,
+      path: media.fsPath
+    });
+  }, [media]);
+
+  const revealMedia = React.useCallback(() => {
+    messageHandler.send(DashboardMessage.revealMedia, {
+      file: media.fsPath,
+      folder: selectedFolder
+    });
+  }, [selectedFolder]);
+
+  const customScriptActions = React.useMemo(() => {
+    return (scripts || [])
+      .filter((script) => script.type === ScriptType.MediaFile && !script.hidden)
+      .map((script) => (
+        <DropdownMenuItem
+          key={script.title}
+          onClick={() => runCustomScript(script)}
+        >
+          <CommandLineIcon className="mr-2 h-4 w-4" aria-hidden={true} />
+          <span>{script.title}</span>
+        </DropdownMenuItem>
+      ));
+  }, [scripts]);
+
+  return (
+    <div className={`group/actions absolute top-4 right-4 flex flex-col space-y-4`}>
+      <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 group-hover/actions:bg-[var(--vscode-sideBar-background)] group-hover/actions:border-[var(--frontmatter-border)]`}>
+        <Menu as="div" className="relative z-10 flex text-left">
+          <div className="hidden group-hover/actions:flex">
+            <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemMenuItemView)} onClick={showMediaDetails}>
+              <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
+              <span className='sr-only'>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemView)}</span>
+            </QuickAction>
+
+            <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)} onClick={showUpdateMedia}>
+              <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
+              <span className='sr-only'>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}</span>
+            </QuickAction>
+
+            {viewData?.filePath ? (
+              <>
+                <QuickAction
+                  title={
+                    viewData.metadataInsert && viewData.fieldName
+                      ? l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertField, viewData.fieldName)
+                      : l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertMarkdown)
+                  }
+                  onClick={insertIntoArticle}
+                >
+                  <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
+                </QuickAction>
+
+                {viewData?.position && snippets.length > 0 && (
+                  <QuickAction title={l10n.t(LocalizationKey.commonInsertSnippet)} onClick={insertSnippet}>
+                    <CodeBracketIcon className={`w-4 h-4`} aria-hidden="true" />
+                  </QuickAction>
+                )}
+              </>
+            ) : (
+              <>
+                {
+                  relPath && (
+                    <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)} onClick={copyToClipboard}>
+                      <ClipboardIcon className={`w-4 h-4`} aria-hidden="true" />
+                    </QuickAction>
+                  )
+                }
+              </>
+            )}
+
+            <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionDelete)} onClick={onDelete}>
+              <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
+            </QuickAction>
+          </div>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger className='text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'>
+              <span className="sr-only">{l10n.t(LocalizationKey.commonMenu)}</span>
+              <EllipsisVerticalIcon className="w-4 h-4" aria-hidden="true" />
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={showUpdateMedia}>
+                <PencilIcon className="mr-2 h-4 w-4" aria-hidden={true} />
+                <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}</span>
+              </DropdownMenuItem>
+
+              {
+                viewData?.filePath ? (
+                  <>
+                    <DropdownMenuItem onClick={insertIntoArticle}>
+                      <PlusIcon className="mr-2 h-4 w-4" aria-hidden={true} />
+                      <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemInsertImage)}</span>
+                    </DropdownMenuItem>
+
+                    {
+                      viewData?.position &&
+                      snippets.length > 0 &&
+                      snippets.map((snippet, idx) => (
+                        <DropdownMenuItem key={idx} onClick={() => processSnippet(snippet)}>
+                          <CodeBracketIcon
+                            className="mr-2 h-4 w-4"
+                            aria-hidden={true}
+                          />
+                          <span>{snippet.title}</span>
+                        </DropdownMenuItem>
+                      ))
+                    }
+
+                    {customScriptActions}
+                  </>
+                ) : (
+                  <>
+                    <DropdownMenuItem onClick={copyToClipboard}>
+                      <ClipboardIcon className="mr-2 h-4 w-4" aria-hidden={true} />
+                      <span>{l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)}</span>
+                    </DropdownMenuItem>
+
+                    {customScriptActions}
+                  </>
+                )
+              }
+
+              <DropdownMenuItem onClick={revealMedia}>
+                <EyeIcon className="mr-2 h-4 w-4" aria-hidden={true} />
+                <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemRevealMedia)}</span>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem onClick={onDelete} className={`focus:bg-[var(--vscode-statusBarItem-errorBackground)] focus:text-[var(--vscode-statusBarItem-errorForeground)]`}>
+                <TrashIcon className="mr-2 h-4 w-4" aria-hidden={true} />
+                <span>{l10n.t(LocalizationKey.commonDelete)}</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Menu>
+      </div>
+    </div>
+  );
+};
@@ -1,6 +1,7 @@
 import { Menu } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
+import { DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';

 export interface IMenuButtonProps {
  label: string | JSX.Element;
@@ -15,18 +16,16 @@ export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
 }: React.PropsWithChildren<IMenuButtonProps>) => {
  return (
    <div className={`group flex items-center ${disabled ? 'opacity-50' : ''}`}>
-      <div className={`mr-2 font-medium flex items-center text-[var(--vscode-tab-inactiveForeground)]`}>{label}:</div>
+      <div className={`mr-2 font-medium flex items-center text-[var(--vscode-tab-inactiveForeground)]`}>
+        {label}:
+      </div>

-      <Menu.Button
-        disabled={disabled}
-        className={`group inline-flex justify-center text-sm font-medium text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]`}
-      >
-        {title}
-        <ChevronDownIcon
-          className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-[var(--vscode-textLink-foreground)] group-hover:text-[var(--vscode-textLink-activeForeground)]`}
-          aria-hidden="true"
-        />
-      </Menu.Button>
+      <DropdownMenuTrigger
+        className='text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)] flex items-center focus:outline-none'
+        disabled={disabled}>
+        <span>{title}</span>
+        <ChevronDownIcon className={`-mr-1 ml-1 h-4 w-4`} aria-hidden="true" />
+      </DropdownMenuTrigger>
    </div>
  );
 };
@@ -1,12 +1,13 @@
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
+import { DropdownMenuItem } from '../../../components/shadcn/Dropdown';

 export interface IMenuItemProps {
  title: JSX.Element | string;
  value?: any;
  isCurrent?: boolean;
  disabled?: boolean;
-  onClick: (value: any, e: React.MouseEvent<HTMLButtonElement>) => void;
+  onClick: (value: any, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }

 export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({
@@ -17,15 +18,12 @@ export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({
  onClick
 }: React.PropsWithChildren<IMenuItemProps>) => {
  return (
-    <Menu.Item>
-      <button
-        disabled={disabled}
-        onClick={(e) => onClick(value, e)}
-        className={`${!isCurrent ? `font-normal` : `font-bold`
-          } block px-4 py-2 text-sm w-full text-left disabled:opacity-50 text-[var(--vscode-editor-foreground)] hover:bg-[var(--vscode-list-hoverBackground)]`}
-      >
-        {title}
-      </button>
-    </Menu.Item>
+    <DropdownMenuItem
+      className={`${!isCurrent ? `font-normal` : `font-bold`}`}
+      disabled={disabled}
+      onClick={(e) => onClick(value, e)}
+    >
+      {title}
+    </DropdownMenuItem>
  );
 };
@@ -1,38 +0,0 @@
-import { Menu, Transition } from '@headlessui/react';
-import * as React from 'react';
-import { Fragment } from 'react';
-
-export interface IMenuItemsProps {
-  widthClass?: string;
-  marginTopClass?: string;
-  updatePopper?: () => void;
-  disablePopper?: boolean;
-}
-
-export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({
-  widthClass,
-  marginTopClass,
-  children,
-  updatePopper,
-  disablePopper
-}: React.PropsWithChildren<IMenuItemsProps>) => {
-  return (
-    <Transition
-      as={Fragment}
-      beforeEnter={() => (updatePopper ? updatePopper() : null)}
-      enter="transition ease-out duration-100"
-      enterFrom="transform opacity-0 scale-95"
-      enterTo="transform opacity-100 scale-100"
-      leave="transition ease-in duration-75"
-      leaveFrom="transform opacity-100 scale-100"
-      leaveTo="transform opacity-0 scale-95"
-    >
-      <Menu.Items
-        className={`${widthClass || ''} ${marginTopClass || 'mt-2'} ${disablePopper ? 'origin-top-right absolute right-0 z-20' : ''
-          } rounded shadow-2xl ring-1 ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto bg-[var(--vscode-sideBar-background)] ring-[var(--frontmatter-border)]`}
-      >
-        <div className="py-1">{children}</div>
-      </Menu.Items>
-    </Transition>
-  );
-};
@@ -1,5 +1,4 @@
 export * from './ActionMenuButton';
 export * from './MenuButton';
 export * from './MenuItem';
-export * from './MenuItems';
 export * from './QuickAction';
@@ -0,0 +1,20 @@
+import { parseWinPath } from '../../helpers/parseWinPath';
+
+export const getRelPath = (path: string, staticFolder?: string, wsFolder?: string) => {
+  let relPath: string | undefined = '';
+  if (wsFolder && path) {
+    const wsFolderParsed = parseWinPath(wsFolder);
+    const mediaParsed = parseWinPath(path);
+
+    relPath = mediaParsed.split(wsFolderParsed).pop();
+
+    // If the static folder is the root, we can just return the relative path
+    if (staticFolder === '/') {
+      return relPath;
+    } else if (staticFolder && relPath) {
+      const staticFolderParsed = parseWinPath(staticFolder);
+      relPath = relPath.split(staticFolderParsed).pop();
+    }
+  }
+  return relPath;
+};
@@ -1,2 +1,3 @@
+export * from './getRelPath';
 export * from './preserveColor';
 export * from './updateCssVariables';