Fix menu in welcome view

src/components/shadcn/Dropdown.tsx

@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1 my-1 h-px bg-[var(--frontmatter-border)]", className)}
     {...props}
   />
 ))

src/dashboardWebView/components/Contents/ContentActions.tsx

@@ -1,5 +1,4 @@
 import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
 import { EyeIcon, GlobeEuropeAfricaIcon, CommandLineIcon, TrashIcon, EllipsisVerticalIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { CustomScript, ScriptType } from '../../../models';
@@ -98,7 +97,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
           !script.hidden
       )
       .map((script) => (
-        <DropdownMenuItem onClick={(e) => runCustomScript(e, script)}>
+        <DropdownMenuItem key={script.id || script.title} onClick={(e) => runCustomScript(e, script)}>
           <CommandLineIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
           <span>{script.title}</span>
         </DropdownMenuItem>
@@ -115,7 +114,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
           className={`flex items-center border border-transparent rounded-full ${listView ? '' : 'p-2 -mt-4'
             } group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--frontmatter-border)]`}
         >
-          <Menu as="div" className={`relative flex text-left`}>
+          <div className={`relative flex text-left`}>
             {!listView && (
               <div className="hidden group-hover/card:flex">
                 <QuickAction title={l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)} onClick={onView}>
@@ -171,7 +170,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
 
               </DropdownMenuContent>
             </DropdownMenu>
-          </Menu>
+          </div>
         </div>
       </div>
 

src/dashboardWebView/components/Media/ItemMenu.tsx

@@ -1,6 +1,5 @@
 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';
@@ -77,7 +76,7 @@ export const ItemMenu: React.FunctionComponent<IItemMenuProps> = ({
   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="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" />
@@ -184,7 +183,7 @@ export const ItemMenu: React.FunctionComponent<IItemMenuProps> = ({
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-        </Menu>
+        </div>
       </div>
     </div>
   );

src/dashboardWebView/components/Menu/ActionMenuButton.tsx

@@ -1,4 +1,3 @@
-import { Menu } from '@headlessui/react';
 import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 
@@ -14,7 +13,7 @@ export const ActionMenuButton: React.FunctionComponent<IActionMenuButtonProps> =
   ref
 }: React.PropsWithChildren<IActionMenuButtonProps>) => {
   return (
-    <Menu.Button
+    <button
       ref={ref || null}
       onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
       disabled={disabled}
@@ -22,6 +21,6 @@ export const ActionMenuButton: React.FunctionComponent<IActionMenuButtonProps> =
     >
       <span className="sr-only">{title}</span>
       <EllipsisVerticalIcon className="w-4 h-4" aria-hidden="true" />
-    </Menu.Button>
+    </button>
   );
 };

src/dashboardWebView/components/Menu/MenuButton.tsx

@@ -1,4 +1,3 @@
-import { Menu } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';

src/dashboardWebView/components/Menu/MenuItem.tsx

@@ -1,4 +1,3 @@
-import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { DropdownMenuItem } from '../../../components/shadcn/Dropdown';
 

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -5,7 +5,6 @@ import { Settings } from '../../models/Settings';
 import { Status } from '../../models/Status';
 import { Step } from './Step';
 import { useMemo, useState } from 'react';
-import { Menu } from '@headlessui/react';
 import { MenuItem } from '../Menu';
 import { Framework, StaticFolder, Template } from '../../../models';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
@@ -19,6 +18,7 @@ import { Spinner } from '../Common/Spinner';
 import { AstroContentTypes } from '../Configuration/Astro/AstroContentTypes';
 import { ContentFolders } from '../Configuration/Common/ContentFolders';
 import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator } from '../../../components/shadcn/Dropdown';
 
 export interface IStepsToGetStartedProps {
   settings: Settings;
@@ -116,42 +116,33 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
               {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkDescription)}
             </div>
 
-            <Menu as="div" className="relative inline-block text-left mt-4">
-              <div>
-                <Menu.Button className={`group flex justify-center p-2 rounded-md border text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}>
-                  {framework ? framework : l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkSelect)}
-                  <ChevronDownIcon
-                    className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5`}
-                    aria-hidden="true"
-                  />
-                </Menu.Button>
-              </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger className='mt-4 group flex justify-center p-2 rounded-md border text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] focus:outline-none'>
+                <span className="">{framework ? framework : l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkSelect)}</span>
+                <ChevronDownIcon className="-mr-1 ml-1 w-4 h-4" aria-hidden="true" />
+              </DropdownMenuTrigger>
 
-              <Menu.Items
-                className={`w-40 origin-top-left absolute left-0 z-10 mt-2 rounded-md 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">
+              <DropdownMenuContent align='start'>
+                <MenuItem
+                  title={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkSelectOther)}
+                  value={`other`}
+                  isCurrent={!framework}
+                  onClick={(value: string) => setFrameworkAndSendMessage(value)}
+                />
+
+                <DropdownMenuSeparator />
+
+                {frameworks.map((f) => (
                   <MenuItem
-                    title={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkSelectOther)}
-                    value={`other`}
-                    isCurrent={!framework}
+                    key={f.name}
+                    title={f.name}
+                    value={f.name}
+                    isCurrent={f.name === framework}
                     onClick={(value: string) => setFrameworkAndSendMessage(value)}
                   />
-
-                  <hr className={`border-[var(--frontmatter-border)]`} />
-
-                  {frameworks.map((f) => (
-                    <MenuItem
-                      key={f.name}
-                      title={f.name}
-                      value={f.name}
-                      isCurrent={f.name === framework}
-                      onClick={(value: string) => setFrameworkAndSendMessage(value)}
-                    />
-                  ))}
-                </div>
-              </Menu.Items>
-            </Menu>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         ),
         show: true,