diff --git a/web/core/components/pages/editor/header/options-dropdown.tsx b/web/core/components/pages/editor/header/options-dropdown.tsx index 016ca8eb57..21c2f71624 100644 --- a/web/core/components/pages/editor/header/options-dropdown.tsx +++ b/web/core/components/pages/editor/header/options-dropdown.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react"; import { useParams } from "next/navigation"; -import { ArchiveRestoreIcon, Clipboard, Copy, Link, Lock, LockOpen } from "lucide-react"; +import { ArchiveRestoreIcon, ClipboardCopy, Copy, FileLock2, Link, LockOpen } from "lucide-react"; // document editor import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor"; // ui @@ -103,7 +103,7 @@ export const PageOptionsDropdown: React.FC = observer((props) => { ); }, label: "Copy markdown", - icon: Clipboard, + icon: ClipboardCopy, shouldRender: true, }, { @@ -125,9 +125,9 @@ export const PageOptionsDropdown: React.FC = observer((props) => { shouldRender: true, }, { - key: "make-a-copy", + key: "duplicate", action: saveDescriptionYJSAndPerformAction(handleDuplicatePage), - label: "Make a copy", + label: "Duplicate", icon: Copy, shouldRender: canCurrentUserDuplicatePage, }, @@ -135,7 +135,7 @@ export const PageOptionsDropdown: React.FC = observer((props) => { key: "lock-unlock-page", action: is_locked ? handleUnlockPage : saveDescriptionYJSAndPerformAction(handleLockPage), label: is_locked ? "Unlock page" : "Lock page", - icon: is_locked ? LockOpen : Lock, + icon: is_locked ? LockOpen : FileLock2, shouldRender: canCurrentUserLockPage, }, { @@ -156,6 +156,7 @@ export const PageOptionsDropdown: React.FC = observer((props) => { Full width {}} /> +
{MENU_ITEMS.map((item) => { if (!item.shouldRender) return null; return ( diff --git a/web/core/hooks/use-page-filters.ts b/web/core/hooks/use-page-filters.ts index 309cb5f462..fac3f3f03d 100644 --- a/web/core/hooks/use-page-filters.ts +++ b/web/core/hooks/use-page-filters.ts @@ -7,12 +7,14 @@ export type TPagesPersonalizationConfig = { full_width: boolean; font_size: TEditorFontSize; font_style: TEditorFontStyle; + sticky_toolbar: boolean; }; const DEFAULT_PERSONALIZATION_VALUES: TPagesPersonalizationConfig = { full_width: false, font_size: "large-font", font_style: "sans-serif", + sticky_toolbar: true, }; export const usePageFilters = () => { @@ -25,6 +27,7 @@ export const usePageFilters = () => { const isFullWidth = !!pagesConfig?.full_width; const fontSize = pagesConfig?.font_size ?? DEFAULT_PERSONALIZATION_VALUES.font_size; const fontStyle = pagesConfig?.font_style ?? DEFAULT_PERSONALIZATION_VALUES.font_style; + const isToolbarSticky = pagesConfig?.sticky_toolbar ?? DEFAULT_PERSONALIZATION_VALUES.sticky_toolbar; // update action const handleUpdateConfig = (payload: Partial) => setPagesConfig({ @@ -55,6 +58,14 @@ export const usePageFilters = () => { handleUpdateConfig({ font_style: value, }); + /** + * @description action to update sticky_toolbar value + * @param {boolean} value + */ + const handleStickyToolbar = (value: boolean) => + handleUpdateConfig({ + sticky_toolbar: value, + }); return { fontSize, @@ -63,5 +74,7 @@ export const usePageFilters = () => { handleFontStyle, isFullWidth, handleFullWidth, + isToolbarSticky, + handleStickyToolbar, }; };