diff --git a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx index 8ff976571..a5ba7c606 100644 --- a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx +++ b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx @@ -2,18 +2,22 @@ import { useMemo, useState } from "react"; import { observer } from "mobx-react"; -import { ArrowUpToLine, Clipboard } from "lucide-react"; +import { ArrowUpToLine, Clipboard, History } from "lucide-react"; // plane imports import { TContextMenuItem, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui"; import { copyTextToClipboard } from "@plane/utils"; // components import { ExportPageModal, PageActions, TPageActions } from "@/components/pages"; // hooks +import { useAppRouter } from "@/hooks/use-app-router"; import { usePageFilters } from "@/hooks/use-page-filters"; +import { useQueryParams } from "@/hooks/use-query-params"; // plane web imports +import { TPageNavigationPaneTab } from "@/plane-web/components/pages/navigation-pane"; import { EPageStoreType } from "@/plane-web/hooks/store"; // store import { TPageInstance } from "@/store/pages/base-page"; +import { PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM } from "../../navigation-pane"; type Props = { page: TPageInstance; @@ -24,6 +28,8 @@ export const PageOptionsDropdown: React.FC = observer((props) => { const { page, storeType } = props; // states const [isExportModalOpen, setIsExportModalOpen] = useState(false); + // navigation + const router = useAppRouter(); // store values const { name, @@ -32,6 +38,8 @@ export const PageOptionsDropdown: React.FC = observer((props) => { } = page; // page filters const { isFullWidth, handleFullWidth, isStickyToolbarEnabled, handleStickyToolbar } = usePageFilters(); + // query params + const { updateQueryParams } = useQueryParams(); // menu items list const EXTRA_MENU_OPTIONS: (TContextMenuItem & { key: TPageActions })[] = useMemo( () => [ @@ -74,6 +82,21 @@ export const PageOptionsDropdown: React.FC = observer((props) => { icon: Clipboard, shouldRender: true, }, + { + key: "version-history", + action: () => { + // update query param to show info tab in navigation pane + const updatedRoute = updateQueryParams({ + paramsToAdd: { + [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: "info" satisfies TPageNavigationPaneTab, + }, + }); + router.push(updatedRoute); + }, + title: "Version history", + icon: History, + shouldRender: true, + }, { key: "export", action: () => setIsExportModalOpen(true), @@ -82,7 +105,16 @@ export const PageOptionsDropdown: React.FC = observer((props) => { shouldRender: true, }, ], - [editorRef, handleFullWidth, handleStickyToolbar, isContentEditable, isFullWidth, isStickyToolbarEnabled] + [ + editorRef, + handleFullWidth, + handleStickyToolbar, + isContentEditable, + isFullWidth, + isStickyToolbarEnabled, + router, + updateQueryParams, + ] ); return (