next-ai-draw-io/components/canvas/page-tabs.tsx

import { ChevronDown, Plus } from "lucide-react"
import { useState } from "react"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import { IconButton } from "@/components/workspace/icon-button"
import { useDictionary } from "@/hooks/use-dictionary"
import {
    addPage,
    canManagePages,
    duplicatePage,
    keepFocusInCanvas,
    removePage,
    renamePage,
    selectPage,
} from "@/lib/drawio/editor-bridge"
import { useCanvasStore } from "@/stores/canvas-store"

/** Page switcher at the bottom of the canvas (replaces draw.io's page tabs) */
export function PageTabs() {
    const dict = useDictionary()
    const t = dict.workspace
    const pages = useCanvasStore((s) => s.pages)
    const currentPageId = useCanvasStore((s) => s.currentPageId)
    const [menuFor, setMenuFor] = useState<string | null>(null)

    if (!canManagePages() || pages.length === 0) return null

    return (
        <div
            className="pointer-events-auto flex max-w-[min(640px,100%)] items-center gap-0.5 overflow-x-auto rounded-xl bg-card p-1 shadow-float"
            data-testid="page-tabs"
        >
            {pages.map((page) => {
                const isCurrent = page.id === currentPageId
                if (!isCurrent) {
                    return (
                        <button
                            key={page.id}
                            type="button"
                            onClick={() => selectPage(page.id)}
                            className="h-7 max-w-40 shrink-0 truncate rounded-lg px-2.5 text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground"
                        >
                            {page.name}
                        </button>
                    )
                }
                return (
                    <Popover
                        key={page.id}
                        open={menuFor === page.id}
                        onOpenChange={(open) =>
                            setMenuFor(open ? page.id : null)
                        }
                    >
                        <PopoverTrigger asChild>
                            <button
                                type="button"
                                className="flex h-7 max-w-44 shrink-0 items-center gap-1 rounded-lg bg-accent px-2.5 text-[13px] font-medium text-foreground"
                            >
                                <span className="truncate">{page.name}</span>
                                <ChevronDown className="size-3.5 text-muted-foreground" />
                            </button>
                        </PopoverTrigger>
                        <PopoverContent
                            side="top"
                            align="start"
                            className="w-44 p-1"
                            onCloseAutoFocus={keepFocusInCanvas}
                        >
                            {[
                                {
                                    label: t.renamePage,
                                    run: () => renamePage(page.id),
                                },
                                {
                                    label: t.duplicatePage,
                                    run: () => duplicatePage(page.id),
                                },
                                ...(pages.length > 1
                                    ? [
                                          {
                                              label: t.deletePage,
                                              run: () => removePage(page.id),
                                          },
                                      ]
                                    : []),
                            ].map((item) => (
                                <button
                                    key={item.label}
                                    type="button"
                                    onClick={() => {
                                        setMenuFor(null)
                                        item.run()
                                    }}
                                    className="w-full rounded-md px-2.5 py-1.5 text-left text-[13px] hover:bg-accent"
                                >
                                    {item.label}
                                </button>
                            ))}
                        </PopoverContent>
                    </Popover>
                )
            })}
            <IconButton
                label={t.addPage}
                size="sm"
                tooltipSide="top"
                onClick={addPage}
            >
                <Plus />
            </IconButton>
        </div>
    )
}