[WEB-1135] chore: store page full width information in local storage (#4327)

* chore: store page full width information in local storage

* chore: update page types

web/components/pages/editor/editor-body.tsx

@@ -18,6 +18,7 @@ import { PageContentBrowser, PageEditorTitle } from "@/components/pages";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
+import { usePageFilters } from "@/hooks/use-page-filters";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // services
 import { FileService } from "@/services/file.service";
@@ -68,7 +69,6 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   const workspaceId = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "" : "";
   const pageTitle = pageStore?.name ?? "";
   const pageDescription = pageStore?.description_html ?? "<p></p>";
-  const isFullWidth = !!pageStore?.view_props?.full_width;
   const { description_html, isContentEditable, updateTitle, isSubmitting, setIsSubmitting } = pageStore;
   const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
   const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
@@ -79,6 +79,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     members: projectMemberDetails,
     user: currentUser ?? undefined,
   });
+  // page filters
+  const { isFullWidth } = usePageFilters();
 
   const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
 

web/components/pages/editor/header/mobile-root.tsx

@@ -2,6 +2,8 @@ import { observer } from "mobx-react";
 import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
 // components
 import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
+// hooks
+import { usePageFilters } from "@/hooks/use-page-filters";
 // store
 import { IPageStore } from "@/store/pages/page.store";
 
@@ -34,8 +36,9 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
     setSidePeekVisible,
   } = props;
   // derived values
-  const { isContentEditable, view_props } = pageStore;
-  const isFullWidth = !!view_props?.full_width;
+  const { isContentEditable } = pageStore;
+  // page filters
+  const { isFullWidth } = usePageFilters();
 
   if (!editorRef.current && !readOnlyEditorRef.current) return null;
 

web/components/pages/editor/header/options-dropdown.tsx

@@ -4,13 +4,11 @@ import { ArchiveRestoreIcon, Clipboard, Copy, Link, Lock, LockOpen } from "lucid
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/document-editor";
 // ui
 import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
-// constants
-import { EUserProjectRoles } from "@/constants/project";
 // helpers
-import { cn } from "@/helpers/common.helper";
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useApplication, useUser } from "@/hooks/store";
+import { useApplication } from "@/hooks/store";
+import { usePageFilters } from "@/hooks/use-page-filters";
 // store
 import { IPageStore } from "@/store/pages/page.store";
 
@@ -34,18 +32,13 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     canCurrentUserDuplicatePage,
     canCurrentUserLockPage,
     restore,
-    view_props,
-    updateViewProps,
   } = pageStore;
   // store hooks
   const {
     router: { workspaceSlug, projectId },
   } = useApplication();
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
-  // auth
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  // page filters
+  const { isFullWidth, handleFullWidth } = usePageFilters();
 
   const handleArchivePage = async () =>
     await archive().catch(() =>
@@ -149,22 +142,10 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     <CustomMenu maxHeight="md" placement="bottom-start" verticalEllipsis closeOnSelect>
       <CustomMenu.MenuItem
         className="hidden md:flex w-full items-center justify-between gap-2"
-        onClick={() =>
-          updateViewProps({
-            full_width: !view_props?.full_width,
-          })
-        }
-        disabled={!isEditingAllowed}
+        onClick={() => handleFullWidth(!isFullWidth)}
       >
         Full width
-        <ToggleSwitch
-          value={!!view_props?.full_width}
-          onChange={() => {}}
-          className={cn({
-            "opacity-40": !isEditingAllowed,
-          })}
-          disabled={!isEditingAllowed}
-        />
+        <ToggleSwitch value={isFullWidth} onChange={() => {}} />
       </CustomMenu.MenuItem>
       {MENU_ITEMS.map((item) => {
         if (!item.shouldRender) return null;

web/components/pages/editor/header/root.tsx

@@ -4,6 +4,8 @@ import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-ed
 import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
+import { usePageFilters } from "@/hooks/use-page-filters";
 // store
 import { IPageStore } from "@/store/pages/page.store";
 
@@ -36,8 +38,9 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
     setSidePeekVisible,
   } = props;
   // derived values
-  const { isContentEditable, view_props } = pageStore;
-  const isFullWidth = !!view_props?.full_width;
+  const { isContentEditable } = pageStore;
+  // page filters
+  const { isFullWidth } = usePageFilters();
 
   if (!editorRef.current && !readOnlyEditorRef.current) return null;