feat: move page between spaces (#988)

* feat: Move the page to another space

- The ability to move a page to another space has been added

* feat: Move the page to another space
* feat: Move the page to another space

- Correction of the visibility attribute of elements that extend beyond the boundaries of the space selection modal window

* feat: Move the page to another space

- Added removal of query keys when moving pages

* feat: Move the page to another space

- Fix locales

* feat: Move the page to another space
* feat: Move the page to another space

- Fix docker compose

* feat: Move the page to another space

* feat: Move the page to another space

- Some refactor

* feat: Move the page to another space

- Attachments update

* feat: Move the page to another space

- The function of searching for attachments by page ID and updating attachments has been combined

* feat: Move the page to another space

- Fix variable name

* feat: Move the page to another space

- Move current space to parameter of component SpaceSelectionModal

* refactor ui

---------

Co-authored-by: plekhanov <astecom@mail.ru>

apps/client/public/locales/en-US/translation.json

@@ -353,5 +353,9 @@
   "Word count: {{wordCount}}": "Word count: {{wordCount}}",
   "Character count: {{characterCount}}": "Character count: {{characterCount}}",
   "New update": "New update",
-  "{{latestVersion}} is available": "{{latestVersion}} is available"
+  "{{latestVersion}} is available": "{{latestVersion}} is available",
+  "Move": "Move",
+  "Move page": "Move page",
+  "Move page to a different space.": "Move page to a different space.",
+  "Real-time editor connection lost. Retrying...": "Real-time editor connection lost. Retrying..."
 }

apps/client/src/components/common/export-modal.tsx

@@ -65,11 +65,12 @@ export default function ExportModal({
       yOffset="10vh"
       xOffset={0}
       mah={400}
+      onClick={(e) => e.stopPropagation()}
     >
       <Modal.Overlay />
       <Modal.Content style={{ overflow: "hidden" }}>
         <Modal.Header py={0}>
-          <Modal.Title fw={500}>Export {type}</Modal.Title>
+          <Modal.Title fw={500}>{t(`Export ${type}`)}</Modal.Title>
           <Modal.CloseButton />
         </Modal.Header>
         <Modal.Body>

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -1,5 +1,6 @@
 import { ActionIcon, Group, Menu, Text, Tooltip } from "@mantine/core";
 import {
+  IconArrowRight,
   IconArrowsHorizontal,
   IconDots,
   IconFileExport,
@@ -31,11 +32,13 @@ import {
   yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms.ts";
 import { formattedDate, timeAgo } from "@/lib/time.ts";
+import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
 }
 export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
+  const { t } = useTranslation();
   const toggleAside = useToggleAside();
   const [yjsConnectionStatus] = useAtom(yjsConnectionStatusAtom);
 
@@ -43,7 +46,7 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
     <>
       {yjsConnectionStatus === "disconnected" && (
         <Tooltip
-          label="Real-time editor connection lost. Retrying..."
+          label={t("Real-time editor connection lost. Retrying...")}
           openDelay={250}
           withArrow
         >
@@ -83,6 +86,10 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
   const [tree] = useAtom(treeApiAtom);
   const [exportOpened, { open: openExportModal, close: closeExportModal }] =
     useDisclosure(false);
+  const [
+    movePageModalOpened,
+    { open: openMovePageModal, close: closeMoveSpaceModal },
+  ] = useDisclosure(false);
   const [pageEditor] = useAtom(pageEditorAtom);
 
   const handleCopyLink = () => {
@@ -147,6 +154,15 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
 
           <Menu.Divider />
 
+          {!readOnly && (
+            <Menu.Item
+              leftSection={<IconArrowRight size={16} />}
+              onClick={openMovePageModal}
+            >
+              {t("Move")}
+            </Menu.Item>
+          )}
+
           <Menu.Item
             leftSection={<IconFileExport size={16} />}
             onClick={openExportModal}
@@ -217,6 +233,14 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
         open={exportOpened}
         onClose={closeExportModal}
       />
+
+      <MovePageModal
+        pageId={page.id}
+        slugId={page.slugId}
+        currentSpaceSlug={spaceSlug}
+        onClose={closeMoveSpaceModal}
+        open={movePageModalOpened}
+      />
     </>
   );
 }

apps/client/src/features/page/components/move-page-modal.tsx

@@ -0,0 +1,98 @@
+import { Modal, Button, Group, Text } from "@mantine/core";
+import { movePageToSpace } from "@/features/page/services/page-service.ts";
+import { useState } from "react";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+import { ISpace } from "@/features/space/types/space.types.ts";
+import { queryClient } from "@/main.tsx";
+import { SpaceSelect } from "@/features/space/components/sidebar/space-select.tsx";
+import { useNavigate } from "react-router-dom";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+
+interface MovePageModalProps {
+  pageId: string;
+  slugId: string;
+  currentSpaceSlug: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function MovePageModal({
+  pageId,
+  slugId,
+  currentSpaceSlug,
+  open,
+  onClose,
+}: MovePageModalProps) {
+  const { t } = useTranslation();
+  const [targetSpace, setTargetSpace] = useState<ISpace>(null);
+  const navigate = useNavigate();
+
+  const handlePageMove = async () => {
+    if (!targetSpace) return;
+
+    try {
+      await movePageToSpace({ pageId, spaceId: targetSpace.id });
+      queryClient.removeQueries({
+        predicate: (item) =>
+          ["pages", "sidebar-pages", "root-sidebar-pages"].includes(
+            item.queryKey[0] as string,
+          ),
+      });
+
+      const pageUrl = buildPageUrl(targetSpace.slug, slugId, undefined);
+      navigate(pageUrl);
+      notifications.show({
+        message: t("Page moved successfully"),
+      });
+      onClose();
+    } catch (err) {
+      notifications.show({
+        message: err.response?.data.message || "An error occurred",
+        color: "red",
+      });
+      console.log(err);
+    }
+    setTargetSpace(null);
+  };
+
+  const handleChange = (space: ISpace) => {
+    setTargetSpace(space);
+  };
+
+  return (
+    <Modal.Root
+      opened={open}
+      onClose={onClose}
+      size={500}
+      padding="xl"
+      yOffset="10vh"
+      xOffset={0}
+      mah={400}
+      onClick={e => e.stopPropagation()}
+    >
+      <Modal.Overlay />
+      <Modal.Content style={{ overflow: "hidden" }}>
+        <Modal.Header py={0}>
+          <Modal.Title fw={500}>{t("Move page")}</Modal.Title>
+          <Modal.CloseButton />
+        </Modal.Header>
+        <Modal.Body>
+          <Text mb="xs" c="dimmed" size="sm">{t("Move page to a different space.")}</Text>
+
+          <SpaceSelect
+            value={currentSpaceSlug}
+            clearable={false}
+            onChange={handleChange}
+          />
+          <Group justify="end" mt="md">
+            <Button onClick={onClose} variant="default">
+              {t("Cancel")}
+            </Button>
+            <Button onClick={handlePageMove}>{t("Move")}</Button>
+          </Group>
+        </Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
+  );
+}

apps/client/src/features/page/services/page-service.ts

@@ -2,6 +2,7 @@ import api from "@/lib/api-client";
 import {
   IExportPageParams,
   IMovePage,
+  IMovePageToSpace,
   IPage,
   IPageInput,
   SidebarPagesParams,
@@ -34,6 +35,10 @@ export async function movePage(data: IMovePage): Promise<void> {
   await api.post<void>("/pages/move", data);
 }
 
+export async function movePageToSpace(data: IMovePageToSpace): Promise<void> {
+  await api.post<void>("/pages/move-to-space", data);
+}
+
 export async function getSidebarPages(
   params: SidebarPagesParams,
 ): Promise<IPagination<IPage>> {

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -7,11 +7,12 @@ import {
   usePageQuery,
   useUpdatePageMutation,
 } from "@/features/page/queries/page-query.ts";
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import classes from "@/features/page/tree/styles/tree.module.css";
 import { ActionIcon, Menu, rem } from "@mantine/core";
 import {
+  IconArrowRight,
   IconChevronDown,
   IconChevronRight,
   IconDotsVertical,
@@ -56,6 +57,7 @@ import { extractPageSlugId } from "@/lib";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
 import { useTranslation } from "react-i18next";
 import ExportModal from "@/components/common/export-modal";
+import MovePageModal from "../../components/move-page-modal.tsx";
 
 interface SpaceTreeProps {
   spaceId: string;
@@ -234,6 +236,7 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
   const emit = useQueryEmit();
   const { spaceSlug } = useParams();
   const timerRef = useRef(null);
+  const { t } = useTranslation();
 
   const prefetchPage = () => {
     timerRef.current = setTimeout(() => {
@@ -369,7 +372,7 @@ function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
           />
         </div>
 
-        <span className={classes.text}>{node.data.name || "untitled"}</span>
+        <span className={classes.text}>{node.data.name || t("untitled")}</span>
 
         <div className={classes.actions}>
           <NodeMenu node={node} treeApi={tree} />
@@ -434,6 +437,10 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
   const { openDeleteModal } = useDeletePageModal();
   const [exportOpened, { open: openExportModal, close: closeExportModal }] =
     useDisclosure(false);
+  const [
+    movePageModalOpened,
+    { open: openMovePageModal, close: closeMoveSpaceModal },
+  ] = useDisclosure(false);
 
   const handleCopyLink = () => {
     const pageUrl =
@@ -486,8 +493,18 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
 
           {!(treeApi.props.disableEdit as boolean) && (
             <>
-              <Menu.Divider />
+              <Menu.Item
+                leftSection={<IconArrowRight size={16} />}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  openMovePageModal();
+                }}
+              >
+                {t("Move")}
+              </Menu.Item>
 
+              <Menu.Divider />
               <Menu.Item
                 c="red"
                 leftSection={<IconTrash size={16} />}
@@ -504,6 +521,14 @@ function NodeMenu({ node, treeApi }: NodeMenuProps) {
         </Menu.Dropdown>
       </Menu>
 
+      <MovePageModal
+        pageId={node.id}
+        slugId={node.data.slugId}
+        currentSpaceSlug={spaceSlug}
+        onClose={closeMoveSpaceModal}
+        open={movePageModalOpened}
+      />
+
       <ExportModal
         type="page"
         id={node.id}

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

@@ -42,6 +42,11 @@ export interface IMovePage {
   parentPageId?: string;
 }
 
+export interface IMovePageToSpace {
+  pageId: string;
+  spaceId: string;
+}
+
 export interface SidebarPagesParams {
   spaceId: string;
   pageId?: string;

apps/client/src/features/space/components/sidebar/space-select.tsx

@@ -6,21 +6,33 @@ import { ISpace } from "../../types/space.types";
 import { useTranslation } from "react-i18next";
 
 interface SpaceSelectProps {
-  onChange: (value: string) => void;
+  onChange: (value: ISpace) => void;
   value?: string;
   label?: string;
+  width?: number;
+  opened?: boolean;
+  clearable?: boolean;
 }
 
 const renderSelectOption: SelectProps["renderOption"] = ({ option }) => (
   <Group gap="sm" wrap="nowrap">
     <Avatar color="initials" variant="filled" name={option.label} size={20} />
     <div>
-      <Text size="sm" lineClamp={1}>{option.label}</Text>
+      <Text size="sm" lineClamp={1}>
+        {option.label}
+      </Text>
     </div>
   </Group>
 );
 
-export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
+export function SpaceSelect({
+  onChange,
+  label,
+  value,
+  width,
+  opened,
+  clearable,
+}: SpaceSelectProps) {
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState("");
   const [debouncedQuery] = useDebouncedValue(searchValue, 500);
@@ -42,8 +54,8 @@ export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
         });
 
       const filteredSpaceData = spaceData.filter(
-        (user) =>
-          !data.find((existingUser) => existingUser.value === user.value),
+        (space) =>
+          !data.find((existingSpace) => existingSpace.value === space.value),
       );
       setData((prevData) => [...prevData, ...filteredSpaceData]);
     }
@@ -59,14 +71,18 @@ export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
       searchable
       searchValue={searchValue}
       onSearchChange={setSearchValue}
-      clearable
+      clearable={clearable}
       variant="filled"
-      onChange={onChange}
+      onChange={(slug) =>
+        onChange(spaces.items?.find((item) => item.slug === slug))
+      }
+      // duct tape
+      onClick={(e) => e.stopPropagation()}
       nothingFoundMessage={t("No space found")}
       limit={50}
       checkIconPosition="right"
-      comboboxProps={{ width: 300, withinPortal: false }}
-      dropdownOpened
+      comboboxProps={{ width, withinPortal: false }}
+      dropdownOpened={opened}
     />
   );
 }

apps/client/src/features/space/components/sidebar/switch-space.tsx

@@ -55,7 +55,9 @@ export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
         <SpaceSelect
           label={spaceName}
           value={spaceSlug}
-          onChange={handleSelect}
+          onChange={space => handleSelect(space.slug)}
+          width={300}
+          opened={true}
         />
       </Popover.Dropdown>
     </Popover>

apps/client/src/features/user/components/change-email.tsx

@@ -70,7 +70,6 @@ function ChangeEmailForm() {
 
   function handleSubmit(data: FormValues) {
     setIsLoading(true);
-    console.log(data);
   }
 
   return (