feat: edit mode preference (#666)

* lock/unlock pages

* remove using isLocked column - add default page edit state preference

* * Move state management to editors (avoids flickers on edit mode switch)
* Rename variables
* Add strings to translation file
* Memoize components in page component
* Fix title editor sending update request on editable state change

* fixed errors merging main

* Fix embed view in read-only mode

* remove unused line

* sync

* fix responsiveness on mobile

---------

Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>

apps/client/src/features/user/components/page-state-pref.tsx

@@ -0,0 +1,65 @@
+import { Group, Text, MantineSize, SegmentedControl } from "@mantine/core";
+import { useAtom } from "jotai";
+import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { updateUser } from "@/features/user/services/user-service.ts";
+import React, { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { PageEditMode } from "@/features/user/types/user.types.ts";
+
+export default function PageStatePref() {
+  const { t } = useTranslation();
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">{t("Default page edit mode")}</Text>
+        <Text size="sm" c="dimmed">
+          {t("Choose your preferred page edit mode. Avoid accidental edits.")}
+        </Text>
+      </div>
+
+      <PageStateSegmentedControl />
+    </Group>
+  );
+}
+
+interface PageStateSegmentedControlProps {
+  size?: MantineSize;
+}
+
+export function PageStateSegmentedControl({
+  size,
+}: PageStateSegmentedControlProps) {
+  const { t } = useTranslation();
+  const [user, setUser] = useAtom(userAtom);
+  const pageEditMode =
+    user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
+  const [value, setValue] = useState(pageEditMode);
+
+  const handleChange = useCallback(
+    async (value: string) => {
+      const updatedUser = await updateUser({ pageEditMode: value });
+      setValue(value);
+      setUser(updatedUser);
+    },
+    [user, setUser],
+  );
+
+  useEffect(() => {
+    if (pageEditMode !== value) {
+      setValue(pageEditMode);
+    }
+  }, [pageEditMode, value]);
+
+  return (
+    <SegmentedControl
+      size={size}
+      value={value}
+      onChange={handleChange}
+      data={[
+        { label: t("Edit"), value: PageEditMode.Edit },
+        { label: t("Read"), value: PageEditMode.Read },
+      ]}
+    />
+  );
+}

apps/client/src/features/user/types/user.types.ts

@@ -19,6 +19,7 @@ export interface IUser {
   deactivatedAt: Date;
   deletedAt: Date;
   fullPageWidth: boolean; // used for update
+  pageEditMode: string; // used for update
 }
 
 export interface ICurrentUser {
@@ -29,5 +30,11 @@ export interface ICurrentUser {
 export interface IUserSettings {
   preferences: {
     fullPageWidth: boolean;
+    pageEditMode: string;
   };
-}
+}
+
+export enum PageEditMode {
+  Read = "read",
+  Edit = "edit",
+}