From e824aeced7a4e8f09ec10e14b930c9d38142483c Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Wed, 3 Jul 2024 11:23:42 +0100
Subject: [PATCH] Add width option to page menu

---
 .../page/components/header/page-header-menu.tsx     | 11 ++++++++++-
 .../features/user/components/page-width-pref.tsx    | 13 ++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/features/page/components/header/page-header-menu.tsx b/apps/client/src/features/page/components/header/page-header-menu.tsx
index 5de80b5..718406d 100644
--- a/apps/client/src/features/page/components/header/page-header-menu.tsx
+++ b/apps/client/src/features/page/components/header/page-header-menu.tsx
@@ -1,5 +1,6 @@
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import { ActionIcon, Group, Menu, Tooltip } from "@mantine/core";
 import {
+  IconArrowsHorizontal,
   IconDots,
   IconHistory,
   IconLink,
@@ -19,6 +20,7 @@ import { getAppUrl } from "@/lib/config.ts";
 import { extractPageSlugId } from "@/lib";
 import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
+import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -95,6 +97,13 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
           Copy link
         </Menu.Item>
         <Menu.Divider />
+
+        <Menu.Item leftSection={<IconArrowsHorizontal size={16} stroke={2} />}>
+          <Group wrap="nowrap">
+            <PageWidthToggle label="Full width" />
+          </Group>
+        </Menu.Item>
+
         <Menu.Item
           leftSection={<IconHistory size={16} stroke={2} />}
           onClick={openHistoryModal}
diff --git a/apps/client/src/features/user/components/page-width-pref.tsx b/apps/client/src/features/user/components/page-width-pref.tsx
index fecd231..96e5c48 100644
--- a/apps/client/src/features/user/components/page-width-pref.tsx
+++ b/apps/client/src/features/user/components/page-width-pref.tsx
@@ -1,4 +1,4 @@
-import { Group, Text, Switch } from "@mantine/core";
+import { Group, Text, Switch, MantineSize } from "@mantine/core";
 import { useAtom } from "jotai/index";
 import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { updateUser } from "@/features/user/services/user-service.ts";
@@ -14,12 +14,16 @@ export default function PageWidthPref() {
         </Text>
       </div>
 
-      <WidthToggle />
+      <PageWidthToggle />
     </Group>
   );
 }
 
-function WidthToggle() {
+interface PageWidthToggleProps {
+  size?: MantineSize;
+  label?: string;
+}
+export function PageWidthToggle({ size, label }: PageWidthToggleProps) {
   const [user, setUser] = useAtom(userAtom);
   const [checked, setChecked] = useState(
     user.settings?.preferences?.fullPageWidth,
@@ -34,6 +38,9 @@ function WidthToggle() {
 
   return (
     <Switch
+      size={size}
+      label={label}
+      labelPosition="left"
       defaultChecked={checked}
       onChange={handleChange}
       aria-label="Toggle full page width"