feat: space export (#506)

* wip

* Space export
* option to export pages with children
* include attachments in exports
* unified export UI

* cleanup

* fix: change export icon

* add export button to space settings

* cleanups

* export name

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

@@ -5,36 +5,38 @@ import {
   Text,
   Tooltip,
   UnstyledButton,
-} from '@mantine/core';
-import { spotlight } from '@mantine/spotlight';
+} from "@mantine/core";
+import { spotlight } from "@mantine/spotlight";
 import {
   IconArrowDown,
   IconDots,
+  IconFileExport,
   IconHome,
   IconPlus,
   IconSearch,
   IconSettings,
-} from '@tabler/icons-react';
+} from "@tabler/icons-react";
 
-import classes from './space-sidebar.module.css';
-import React, { useMemo } from 'react';
-import { useAtom } from 'jotai';
-import { SearchSpotlight } from '@/features/search/search-spotlight.tsx';
-import { treeApiAtom } from '@/features/page/tree/atoms/tree-api-atom.ts';
-import { Link, useLocation, useParams } from 'react-router-dom';
-import clsx from 'clsx';
-import { useDisclosure } from '@mantine/hooks';
-import SpaceSettingsModal from '@/features/space/components/settings-modal.tsx';
-import { useGetSpaceBySlugQuery } from '@/features/space/queries/space-query.ts';
-import { getSpaceUrl } from '@/lib/config.ts';
-import SpaceTree from '@/features/page/tree/components/space-tree.tsx';
-import { useSpaceAbility } from '@/features/space/permissions/use-space-ability.ts';
+import classes from "./space-sidebar.module.css";
+import React, { useMemo } from "react";
+import { useAtom } from "jotai";
+import { SearchSpotlight } from "@/features/search/search-spotlight.tsx";
+import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
+import { Link, useLocation, useParams } from "react-router-dom";
+import clsx from "clsx";
+import { useDisclosure } from "@mantine/hooks";
+import SpaceSettingsModal from "@/features/space/components/settings-modal.tsx";
+import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
+import { getSpaceUrl } from "@/lib/config.ts";
+import SpaceTree from "@/features/page/tree/components/space-tree.tsx";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
 import {
   SpaceCaslAction,
   SpaceCaslSubject,
-} from '@/features/space/permissions/permissions.type.ts';
-import PageImportModal from '@/features/page/components/page-import-modal.tsx';
-import { SwitchSpace } from './switch-space';
+} from "@/features/space/permissions/permissions.type.ts";
+import PageImportModal from "@/features/page/components/page-import-modal.tsx";
+import { SwitchSpace } from "./switch-space";
+import ExportModal from "@/components/common/export-modal";
 
 export function SpaceSidebar() {
   const [tree] = useAtom(treeApiAtom);
@@ -52,7 +54,7 @@ export function SpaceSidebar() {
   }
 
   function handleCreatePage() {
-    tree?.create({ parentId: null, type: 'internal', index: 0 });
+    tree?.create({ parentId: null, type: "internal", index: 0 });
   }
 
   return (
@@ -61,7 +63,7 @@ export function SpaceSidebar() {
         <div
           className={classes.section}
           style={{
-            border: 'none',
+            border: "none",
             marginTop: 2,
             marginBottom: 3,
           }}
@@ -78,7 +80,7 @@ export function SpaceSidebar() {
                 classes.menu,
                 location.pathname.toLowerCase() === getSpaceUrl(spaceSlug)
                   ? classes.activeButton
-                  : ''
+                  : ""
               )}
             >
               <div className={classes.menuItemInner}>
@@ -191,6 +193,8 @@ interface SpaceMenuProps {
 function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
   const [importOpened, { open: openImportModal, close: closeImportModal }] =
     useDisclosure(false);
+  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
+    useDisclosure(false);
 
   return (
     <>
@@ -215,6 +219,13 @@ function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
             Import pages
           </Menu.Item>
 
+          <Menu.Item
+            onClick={openExportModal}
+            leftSection={<IconFileExport size={16} />}
+          >
+            Export space
+          </Menu.Item>
+
           <Menu.Divider />
 
           <Menu.Item
@@ -231,6 +242,13 @@ function SpaceMenu({ spaceId, onSpaceSettings }: SpaceMenuProps) {
         open={importOpened}
         onClose={closeImportModal}
       />
+
+      <ExportModal
+        type="space"
+        id={spaceId}
+        open={exportOpened}
+        onClose={closeExportModal}
+      />
     </>
   );
 }

apps/client/src/features/space/components/space-details.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useSpaceQuery } from '@/features/space/queries/space-query.ts';
 import { EditSpaceForm } from '@/features/space/components/edit-space-form.tsx';
-import { Divider, Group, Text } from '@mantine/core';
+import { Button, Divider, Group, Text } from '@mantine/core';
 import DeleteSpaceModal from './delete-space-modal';
+import { useDisclosure } from "@mantine/hooks";
+import ExportModal from "@/components/common/export-modal.tsx";
 
 interface SpaceDetailsProps {
   spaceId: string;
@@ -10,6 +12,8 @@ interface SpaceDetailsProps {
 }
 export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
   const { data: space, isLoading } = useSpaceQuery(spaceId);
+  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
+    useDisclosure(false);
 
   return (
     <>
@@ -22,6 +26,22 @@ export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
 
           {!readOnly && (
             <>
+
+              <Divider my="lg" />
+
+              <Group justify="space-between" wrap="nowrap" gap="xl">
+                <div>
+                  <Text size="md">Export space</Text>
+                  <Text size="sm" c="dimmed">
+                    Export all pages and attachments in this space
+                  </Text>
+                </div>
+
+                <Button onClick={openExportModal}>
+                  Export
+                </Button>
+              </Group>
+
               <Divider my="lg" />
 
               <Group justify="space-between" wrap="nowrap" gap="xl">
@@ -34,6 +54,13 @@ export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
 
                 <DeleteSpaceModal space={space} />
               </Group>
+
+              <ExportModal
+                type="space"
+                id={space.id}
+                open={exportOpened}
+                onClose={closeExportModal}
+              />
             </>
           )}
         </div>