fix(editor): allow standalone accordion deletion and add AccordionGroup popover menu (#4633)

Fixes the accordion deletion logic in the fern-dashboard visual editor.

## Changes Made

This PR fixes two issues with accordion components in the visual editor:

1. **Standalone accordions can now be deleted**: Previously, standalone `Accordion` components (those not within an `AccordionGroup`) could not be deleted because the deletion logic incorrectly treated them as if they were the last accordion in a group.

2. **AccordionGroup now has a popover menu with delete functionality**: Added an `EditorComponentPopoverButton` and `EditorComponentPopoverProvider` to the `AccordionGroup` component, allowing users to delete the entire group.

## Implementation Details

- Added an `isInGroup` boolean prop to `AccordionItem` to distinguish between standalone accordions and those within an AccordionGroup
- Modified the `disableDelete` logic from `accordions.length === 1` to `isInGroup && accordions.length === 1`, so deletion is only prevented for the last accordion within a group
- Wrapped `AccordionGroup` content with `EditorComponentPopoverProvider` (using empty attributes object since no editable properties are needed)
- Added popover button to AccordionGroup with `z-10` to ensure visibility above accordion content

## What was the motivation & context behind this PR?

User reported that standalone accordions could not be deleted, and AccordionGroup components had no way to be deleted at all. The root cause was that the deletion prevention logic (`disableDelete={accordions.length === 1}`) was applied to all accordions regardless of context, including standalone ones which always had an array length of 1.

## How has this PR been tested?

- ✅ Code compiled successfully
- ✅ Passed all lint checks (`pnpm lint:biome`, `pnpm lint:style`, `pnpm format:yaml:check`)
- ⚠️ **Not tested in running application** - requires manual verification in the dashboard editor

## Human Review Checklist

Please verify the following when reviewing:
- [ ] Standalone `Accordion` components can be deleted in the visual editor
- [ ] The last accordion within an `AccordionGroup` still cannot be deleted (protection maintained)
- [ ] `AccordionGroup` now has a visible popover menu with a delete button
- [ ] No z-index or visual layering issues with the new popover button
- [ ] Empty `attributes={{}}` is appropriate for AccordionGroup (no editable properties needed besides delete)

---

**Link to Devin run:** https://app.devin.ai/sessions/e4e7ea824cca4b75ab65a4f217e55334  
**Requested by:** Sarah Bawabe (@sbawabe)

Author: devin-ai-integration[bot]

package.json

@@ -40,6 +40,7 @@
     "fdr:stop": "bash scripts/stop-local-fdr.sh",
     "fdr:unlink-from-cli": "bash scripts/unlink-fdr-sdk-from-cli.sh",
     "format": "pnpm lint:biome:fix && pnpm check:fix && pnpm format:yaml:fix",
+    "format:check": "pnpm format:yaml:check",
     "format:package-json": "sort-package-json \"generators/**/package.json\" \"packages/**/package.json\" --ignore \"**/dist\" --ignore \"**lib\" --ignore \"**/node_modules\"",
     "format:yaml:check": "prettier --check \"**/*.{yml,yaml}\"",
     "format:yaml:fix": "prettier --write \"**/*.{yml,yaml}\"",

packages/fern-dashboard/src/docs/mdx/components/accordion/AccordionGroup.tsx

@@ -55,6 +55,7 @@ export function AccordionGroup({ children }: AccordionGroupProps) {
     const anchor = useCurrentAnchor();
     const [updatedUrl, setUpdatedUrl] = useState<string | null>(null);
     const [isProgrammaticUpdate, setIsProgrammaticUpdate] = useState(false);
+    const popoverRef = useRef<HTMLDivElement>(null);
 
     const registerAccordion = useCallback((accordion: AccordionData) => {
         setAccordions((prevAccordions) => {
@@ -152,9 +153,12 @@ export function AccordionGroup({ children }: AccordionGroupProps) {
     const { isWithinEditor } = useEditorComponent();
     const { appendChildrenMdx } = useEditorComponentChildren();
 
-    return (
-        <>
-            <AccordionContext.Provider value={contextValue}>
+    const accordionGroupContent = (
+        <AccordionContext.Provider value={contextValue}>
+            <div ref={popoverRef} className="relative">
+                {isWithinEditor && (
+                    <EditorComponentPopoverButton className="absolute -right-8 top-2 z-10 h-auto w-auto px-2" />
+                )}
                 <AccordionComponent.Accordion
                     type="multiple"
                     value={activeTabs}
@@ -177,8 +181,18 @@ export function AccordionGroup({ children }: AccordionGroupProps) {
                         </div>
                     )}
                 </AccordionComponent.Accordion>
-            </AccordionContext.Provider>
-        </>
+            </div>
+        </AccordionContext.Provider>
+    );
+
+    if (!isWithinEditor) {
+        return accordionGroupContent;
+    }
+
+    return (
+        <EditorComponentPopoverProvider attributes={{}} targetRef={popoverRef} hoverSlopThreshold={48}>
+            {accordionGroupContent}
+        </EditorComponentPopoverProvider>
     );
 }
 
@@ -214,8 +228,9 @@ function AccordionItem({
     nestedHeaders,
     registerAccordion,
     unregisterAccordion,
-    accordions
-}: AccordionProps & AccordionContextType) {
+    accordions,
+    isInGroup = false
+}: AccordionProps & AccordionContextType & { isInGroup?: boolean }) {
     const uniqueId = React.useId();
     const accordionId = id || `accordion-${uniqueId}`;
 
@@ -251,7 +266,7 @@ function AccordionItem({
                 {isWithinEditor && (
                     <EditorComponentPopoverButton
                         className="absolute right-2 top-2 h-auto w-auto px-2"
-                        disableDelete={accordions.length === 1}
+                        disableDelete={isInGroup && accordions.length === 1}
                     />
                 )}
             </AccordionComponent.AccordionTrigger>
@@ -292,10 +307,11 @@ export function Accordion(props: AccordionProps) {
                         console.error("[unregisterAccordion] AccordionItem is not within an AccordionContext");
                     }}
                     accordions={[{ id: props.id || "", title: props.title || "" }]}
+                    isInGroup={false}
                 />
             </AccordionComponent.Accordion>
         );
     }
 
-    return <AccordionItem {...props} {...accordionContext} />;
+    return <AccordionItem {...props} {...accordionContext} isInGroup={true} />;
 }