chore: updated pages options dropdown

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<Props> = observer((props) => {
         );
       },
       label: "Copy markdown",
-      icon: Clipboard,
+      icon: ClipboardCopy,
       shouldRender: true,
     },
     {
@@ -125,9 +125,9 @@ export const PageOptionsDropdown: React.FC<Props> = 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<Props> = 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<Props> = observer((props) => {
         Full width
         <ToggleSwitch value={isFullWidth} onChange={() => {}} />
       </CustomMenu.MenuItem>
+      <hr className="my-2 border-custom-border-200" />
       {MENU_ITEMS.map((item) => {
         if (!item.shouldRender) return null;
         return (

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<TPagesPersonalizationConfig>) =>
     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,
   };
 };